Vue.js 的 computed 屬性和 watch 的區別在哪裡？

星沉發表於2020-04-04
Vue.js

為什麼寫這篇筆記？

記得在以往的面試中多次被問到這個問題，回答的都不理想，仔細想想也是理解的不到位。今天藉著休息的時間準備查閱文件，寫寫示例程式碼去仔細理解下。

computed 是什麼？

計算屬性介紹：

computed 意為計算屬性，是一個物件。它的使用方法是在 computed 屬性中定義一個方法，和給物件定義方法完全一樣，方法名可以直接在頁面（template）中使用，不需要加 （），這是因為計算屬性看起來是指向了方法（函式），其實指向的是方法 return 的結果。
computed 的特性是計算結果會被快取，如果 function 中依賴的響應式屬性發生變化，computed 便會重新計算。注意如果依賴例項之外的屬性（比如非響應式屬性）則計算結果不會更新。 此外，如果在計算屬性中使用了箭頭函式，則 this 不會指向元件的例項，但在函式中依然可以將例項以函式的第一個引數訪問。如下程式碼：

computed: {
	aDouble: vm => vm.a * 2
}
複製程式碼

此外，計算屬性預設只有 getter ，但也可以使用 setter 。 具體操作示例請看 計算屬性的 getter 和 setter

計算屬性使用示例：

computed: {
	newList: function() {
    	return this.brandList.filter(item => item.name.indexOf(this.keywords) !== -1);
    }
 }
複製程式碼

什麼時候需要計算屬性？

模板內表示式多用於簡單計算，這樣便於閱讀程式碼時的理解。如果在模板表示式裡使用複雜的運算，一是難以理解，二是不能複用。你可能會說，那我在 methods 中定義一個方法 return 處理結果也可以啊。是的，可以。但不同之處在於，計算屬性會快取計算結果，只在依賴的響應式屬性發生變化時，才會更新資料。 更多詳情可訪問

Vue 之 computed 屬性

watch 偵聽器

watch 偵聽器介紹

watch 屬性是一個物件，鍵（key)可以是 Vue 例項的表示式（字面量）和字串（data 中定義的資料），值是回撥函式，也可以是方法名、包含了方法的物件和方法集合的陣列。 回撥函式的引數包含了新值和舊值。同時，如果需要對物件的值做進一步偵聽，需要將鍵（key）對應的值設為物件，在物件的身上定義回撥函式，再設定 deep 為 true。同時如果設定 immediate: true，則回撥會在偵聽開始之前呼叫。 需要注意的是 watcher 函式不能是箭頭函式，官網的解釋是箭頭函式繫結了父級作用域上下文，會使 this 不能按照期望指向 Vue 例項。

什麼時候使用偵聽器？

當需要在資料變化時做非同步或者開銷比較大的操作時，watch 比較有用。

詳細介紹可以訪問 Vue 官網檢視 watch 屬性介紹。

Vue 之 watch 屬性

computed 計算屬性和 watch 偵聽器的區別

相同點

都是在資料發生變化需要進行處理的時候使用。

不同點

  • 使用方式上 計算屬性是依據響應式屬性得出的計算屬性，需要呼叫，且不加（），會快取資料，在響應式屬性更新時，計算屬性也更新。 偵聽器不需要呼叫，會在偵聽屬性發生變化時，自動呼叫。 注意，計算屬性必須 return 一個結果，也就是處理後的計算屬性的值。而偵聽器則不需要。
  • 使用場景上 計算屬性多用於依據一個或多個響應式屬性得到另一個計算屬性。比如：姓+名=全名。比如購物車結算金額時。 偵聽器多用於複雜場景或需要非同步操作時，比如搜尋時，實時出現搜尋建議或提示。（Vue 官網 watch 介紹的例子）

相關文章