Vue 中computed 和 watch 的區別

前言

在vue的項目中，咱們時常會須要對data的改變作出處理，這時候就須要用到watch和computed這兩個屬性，既然都是數值改變觸發改變的屬性，他們之間又有什麼異同呢？

computed

• computed 是計算屬性，它會根據你所依賴的數據動態顯示新的計算結果。
• 計算屬性將被加入到 Vue 實例中。全部 getter 和 setter 的 this 上下文自動地綁定爲 Vue 實例
• 經過計算出來的屬性不須要調用直接能夠在 DOM 裏使用

例子

var vm = new Vue({
  el: '#app',
  data: {
    message: 'red'
  },
  template: `
 <div> <p>我是原始值: "{{ message }}"</p> <p>我是計算屬性的值: "{{ computedMessage}}"</p> // computed 在 DOM 裏直接使用不須要調用 </div> `,
  computed: {
    // 計算屬性的 getter     computedMessage: function () {
      // `this` 指向 vm 實例       return this.message.split('').reverse().join('')
    }
  }
})

結果：
我是原始值: "red"
我是計算屬性的值: "der"

若是不使用計算屬性，那麼 message.split('').reverse().join('') 就會直接寫到 template 裏，那麼在模版中放入太多聲明式的邏輯會讓模板自己太重，尤爲當在頁面中使用大量複雜的邏輯表達式處理數據時，會對頁面的可維護性形成很大的影響

並且計算屬性若是依賴不變的話，它就會變成緩存，computed 的值就不會從新計算

因此，若是數據要經過複雜邏輯來得出結果，那麼就推薦使用計算屬性

watch

• 一個對象，鍵是 data 對應的數據，值是對應的回調函數。值也能夠是方法名，或者包含選項的對象，當 data 的數據發生變化時，就會發生一個回調，他有兩個參數，一個 val （修改後的 data 數據），一個 oldVal（原來的 data 數據）

Vue 實例將會在實例化時調用$watch()，遍歷 watch 對象的每個屬性

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  template: `
 <div> <button @click="n += 1">n+1</button> <button @click="obj.a += 'hi'">obj.a + 'hi'</button> <button @click="obj = {a:'a'}">obj = 新對象</button> </div> `,
  watch: {
    n() {
      console.log("n 變了");
    },
    obj:{
      handler: function (val, oldVal) { 
      console.log("obj 變了")
    },
      deep: true // 該屬性設定在任何被偵聽的對象的 property 改變時都要執行 handler 的回調，不論其被嵌套多深     },
    "obj.a":{
      handler: function (val, oldVal) { 
      console.log("obj.a 變了")
    },
      immediate: true // 該屬性設定該回調將會在偵聽開始以後被當即調用     }
  }
}).$mount("#app");

注意：不該該使用箭頭函數來定義 watcher 函數，由於箭頭函數沒有 this，它的 this 會繼承它的父級函數，可是它的父級函數是 window，致使箭頭函數的 this 指向 window，而不是 Vue 實例

• deep 控制是否要看這個對象裏面的屬性變化
• immediate 控制是否在第一次渲染是執行這個函數
• vm.$watch('data屬性名', fn, {deep: .., immediate: ..})

vm.$watch("n", function(val, newVal){
      console.log("n 變了");
},{deep: true, immediate: true})

二者區別

相同點：

二者都是觀察頁面數據變化的。

不一樣點：

• computed 只有當依賴的數據變化時纔會計算, 會緩存數據。
• watch 每次都須要執行函數。watch 更適用於數據變化時的異步操做

總結

• 若是一個數據須要通過複雜計算就用 computed
• 若是一個數據須要被監聽而且對數據作一些操做就用 watch