Vue computed 與method 的差異比較- iT 邦幫忙 | vue computed methods
tags:Vuejscomputed與method的混淆在模板中要對資料計算或是轉換時,computed與method往往能替我們做到同樣的事情,例如今天需要組合姓氏與名稱成為全名,我可以選擇computed完成,同時method也可以替我完成同樣任務(由於模板對於expression的支持,使得Functioncall也可以寫在模板中。)computed:{name:{get:function(){returnthis.lastName+""+this.firstName;},set:function(value){constname=value.split("");this.lastName=name[0];this.firstName=name[1];}}}methods:{name:function(){returnthis.lastName+""+this.firstName;...
tags: Vuejs computed 與 method 的混淆在模板中要對資料計算或是轉換時,computed 與 method 往往能替我們做到同樣的事情,例如今天需要組合 姓氏 與 名稱 成為 全名,我可以選擇 computed 完成,同時 method 也可以替我完成同樣任務(由於模板對於 expression 的支持,使得 Function call 也可以寫在模板中。)
computed: { name: { get: function () { return this.lastName + " " + this.firstName; }, set: function (value) { const name = value.split(" "); this.lastName = name[0]; this.firstName = name[1]; } } } methods: { name: function () { return this.lastName + " " + this.firstName; } }由於兩者皆能幫我們達成需求,那麼何時該使用 computed?何時又該使用 methods 就成了令人困惑的問題,不過兩者其實並不相同,自官方教學中的敘述我們可以得知兩者的差距:
Vuejs.org 2.x 官網明確地點出了兩者的差距:
計算屬性是基於它們的響應式依賴進行緩存的;相比之下,每當觸發重新渲染時,調用方法將總會再次執行函數。
簡單來說 computed 只會在其依賴的資料 改變 的時候 重新計算求值,儘管在模板中多次調用 computed、或是改變其他資料觸發畫面 重新渲染 這件事,只要 computed property 原始依賴響應的資料 沒有更動,Vue 並不會重新求取 computed property,而是訪問其 緩存結果;另外,method 則是一旦觸...