Vue中watch和computed的區別

1.watch

對數據的監控觀察

var vm = new Vue({
    //......
    data: {
      name: "張三"
    },
    watch: {
      "name": function() { 
        //..... 
      }
    }
  })

上面的代碼，我們在data中定義了name的值。而下面的watch也對應鍵名定義了name，值為一個函數。此時表示watch當前已經監聽了data中的name，當name的值發生改變時，則立即執行對應的函數。

此函數中還規定了兩個參數來方便我們取得數據

watch: {
      "name": function( newVal, oldVal ) { 
        //..... 
      }

第一個參數（newVal）：數據改變后的值
第二個參數（oldVal）：數據改變之前的值

2.watch監聽路由的改變

watch不僅可以監聽data中的數據，還可以監聽路由的變化。
在Vue實例中，使用$route.path監聽路由地址的改變

var vm = new Vue({
    //......
    watch: {
      "$route.path": function() { }
    }
  })

同時，在對於操作比較耗時的操作也是可以使用 watch 監聽。例如用戶注冊時，檢測賬號是否可用

3.computed

定義：是一個計算屬性,類似於過濾器,對綁定到view的數據進行處理

computed是Vue內部規定的【計算屬性】，與watch很像，也可以用來監聽數據的獲取和改變

//html
  <div id="app">
    <input type="text" v-model = "fis">
    <input type="text" v-model = "thir">
    {{ sec }}
  </div>
//js
  var vm = new Vue({
    el:'#app',
    data:{
      fis: 3,
      thir: 5,
    },
    computed:{
      sec: {
        get: function(){ return this.thir}, //只要function中的數據（這里是thir）發生變化，就會觸發函數
        set: function(val){ return 1}
      }
    }
  })

上面的代碼中，定義了computed，監聽了sec（屬性），只要當函數定義的內部數據發生變化，即會觸發函數。函數返回的值便是sec的新值

當sec屬性發生改變，觸發set函數，若sec中只有一個函數，則會默認定義了get
set函數中可以傳一個參數，為當前數據新的值

一般使用場景

使用計算屬性簡化模板

//簡化前
{{msg.split('').reverse().join('')}}

//簡化后
HTML:
{{revserseString}}

JS:
computed: {
    revserseString: function (){
        return this.msg.split('').reverse().join('')
    }
}

上面定義了顛倒字符串的方法，使用計算屬性來簡潔了模板。

4.二者的區別

computed

在computed中定義的每一個計算屬性，都會被緩存起來，只有當計算屬性里面依賴的一個或多個屬性變化了，才會重新計算當前計算屬性的值。

1. 支持數據的緩存。
2. 函數內部的數據改變也會觸發。
3. 不支持異步，當computed內部有異步操作時computed無效
4. 如果一個屬性是由其他屬性計算而來的，這個屬性依賴其他屬性，一般用computed
5. computed 屬性值會默認走緩存，計算屬性是基於它們的響應式依賴進行緩存的，也就是基於data中聲明過或者父組件傳遞的props中的數據通過計算得到的值

watch

watch是屬性監聽器，一般用來監聽屬性的變化（也可以用來監聽計算屬性函數），並做一些操作

1. 不支持緩存
2. 支持異步
3. 只可以設置一個函數，可以帶有兩個參數
4. 監聽數據必須是data中聲明過或者父組件傳遞過來的props中的數據，當數據變化時，觸發其他操作

 

原文：https://blog.csdn.net/pspxuan/article/details/104632916?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control