vue computed 與 watch 區別

1、watch

一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個屬性

html:

            <div>
                <input type="text" v-model="firstAge" />
                <input type="text" v-model="lastAge" />
                <input type="text" v-model="sumAge" />
            </div>

js:

return{
            firstAge:'10',
            lastAge:'20',
            sumAge:'10 20'
}

watch:{
        firstAge: function(val){
            this.sumAge = val + this.lastAge;
        },
        lastAge: function(val){
            this.sumAge = this.firstAge + val;
        }
      }

2、computed

計算屬性將被混入到 Vue 實例中。所有 getter 和 setter 的 this 上下文自動地綁定爲 Vue 實例。

計算屬性的結果會被緩存，除非依賴的響應式屬性變化纔會重新計算。注意，如果實例範疇之外的依賴 (比如非響應式的 not reactive) 是不會觸發計算屬性更新的。

js:

computed:{
        sumAge:function(){
                return this.firstAge + ' ' + this.lastAge;
            
        }
 }

總結：

計算屬性是計算屬性（computed），觀察是觀察( watch )。

計算屬性顧名思義就是通過其他變量計算得來的另一個屬性，fullName在它所依賴firstName，lastName這兩個變量變化時重新計算自己的值。

另外，計算屬性具有緩存。計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會重新求值。這就意味着只要 lastName和firstName都沒有發生改變，多次訪問 fullName計算屬性會立即返回之前的計算結果，而不必再次執行函數。

而觀察watch是觀察一個特定的值，當該值變化時執行特定的函數。例如分頁組件中，我們可以檢測頁碼執行獲取數據的函數。

詳細查看文檔，多研究文檔資料  https://cn.vuejs.org/