vue 中 computed 和 watch 的區別

　　watch 和 computed 都是以 Vue 的依賴追蹤機制為基礎的，當某一個依賴型數據(依賴型數據：簡單理解即放在 data 等對象下的實例數據)發生變化的時候，所有依賴這個數據的相關數據會自動發生變化，即自動調用相關的函數，來實現數據的變動。

　　當依賴的值變化時，在 watch 中，是可以做一些復雜的操作的，而 computed 中的依賴，僅僅是一個值依賴于另一個值，是值上的依賴。

　　應用場景：

　　computed：用于處理復雜的邏輯運算;一個數據受一個或多個數據影響;用來處理 watch 和 methods 無法處理的，或處理起來不方便的情況。例如處理模板中的復雜表達式、購物車里面的商品數量和總金額之間的變化關系等。

　　watch：用來處理當一個屬性發生變化時，需要執行某些具體的業務邏輯操作，或要在數據變化時執行異步或開銷較大的操作;一個數據改變影響多個數據。例如用來監控路由、inpurt 輸入框值的特殊處理等。

　　區別：

　　computed

　　初始化顯示或者相關的 data、props 等屬性數據發生變化的時候調用;

　　計算屬性不在 data 中，它是基于 data 或 props 中的數據通過計算得到的一個新值，這個新值根據已知值的變化而變化;

　　在 computed 屬性對象中定義計算屬性的方法，和取 data 對象里的數據屬性一樣，以屬性訪問的形式調用;

　　如果 computed 屬性值是函數，那么默認會走 get 方法，必須要有一個返回值，函數的返回值就是屬性的屬性值;

　　computed 屬性值默認會緩存計算結果，在重復的調用中，只要依賴數據不變，直接取緩存中的計算結果，只有依賴型數據發生改變，computed 才會重新計算;

　　在 computed 中的，屬性都有一個 get 和一個 set 方法，當數據變化時，調用 set 方法。

　　watch

　　主要用來監聽某些特定數據的變化，從而進行某些具體的業務邏輯操作，可以看作是 computed 和 methods 的結合體;

　　可以監聽的數據來源：data，props，computed 內的數據;

　　watch 支持異步;

　　不支持緩存，監聽的數據改變，直接會觸發相應的操作;

　　監聽函數有兩個參數，第一個參數是最新的值，第二個參數是輸入之前的值，順序一定是新值，舊值。

上一篇

ribbon和feign區別