vue的computed和watch比較

  1. vue 的 computed 和 watch 比較
    1. 語法差異
    2. 語意上的差異

vue 的 computed 和 watch 比較

最近在學vue，學到了watch和computed時，發現它們兩個極像又很難區分。

今天早上騎車時，想到了它們之間的差別了！就趕快來記錄下來。

語法差異

在此也順便的比較了data和methods。
而watch在語法上的特性是可以和data同名，我自己理解成是掛在data的onchange事件上的function。

觸發方式 呼叫方式 必須和變數同名? 呼叫
data 「變數」被賦值，渲染 view o vue.value
watch 「同名的變數」被賦值就執行 o vue.value
computed 「取用的變數」被賦值就執行 x vue.xValue
methods 被呼叫就執行 x vue.value()

語意上的差異

在使用上，vue是一種接 api 資料之後，再將接到的資料，填入html的內容。
所以!!!先被決定的是接到的「資料欄位」，也就是data。

  • watch 使用時機
    改變data時，要非同步執行的函數。
    運算負擔很大時的函數
  • computed 使用時機
    一種寫get、set的設計。

以上是不負責任的…新手小小心得。

發表於 
tags:
  • { vue }