摘要：提問(wèn)深度與非深度的區(qū)別對(duì)象與數(shù)組與的區(qū)別的一個(gè)特點(diǎn)是，最初綁定的時(shí)候是不會(huì)執(zhí)行的，要等到改變時(shí)才執(zhí)行監(jiān)聽(tīng)計(jì)算。為一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。值也可以是方法名，或者包含選項(xiàng)的對(duì)象適用場(chǎng)景一個(gè)數(shù)據(jù)影響多個(gè)數(shù)據(jù)。

1.深度watch與非深度watch的區(qū)別；
2.watch對(duì)象與數(shù)組；
3.watch與computed的區(qū)別；

   
FullName: {{fullName}}
   
FirstName: 

 
new Vue({
  el: "#root",
  data: {
    firstName: "Dawei",
    lastName: "Lou",
    fullName: ""
  },
  watch: {
    firstName(newName, oldName) {
      this.fullName = newName + " " + this.lastName;
    }
  } 
})

watch 的一個(gè)特點(diǎn)是，最初綁定的時(shí)候是不會(huì)執(zhí)行的，要等到 firstName 改變時(shí)才執(zhí)行監(jiān)聽(tīng)計(jì)算。那我們想要一開(kāi)始就讓他最初綁定的時(shí)候就執(zhí)行改怎么辦呢？我們需要修改一下我們的 watch 寫(xiě)法，修改過(guò)后的 watch 代碼如下：

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + " " + this.lastName;
    },
    // 代表在wacth里聲明了firstName這個(gè)方法之后立即先去執(zhí)行handler方法
    immediate: true
  }
}

注意到handler了嗎，我們給 firstName 綁定了一個(gè)handler方法，之前我們寫(xiě)的 watch 方法其實(shí)默認(rèn)寫(xiě)的就是這個(gè)handler，Vue.js會(huì)去處理這個(gè)邏輯，最終編譯出來(lái)其實(shí)就是這個(gè)handler。而immediate:true代表如果在 wacth 里聲明了 firstName 之后，就會(huì)立即先去執(zhí)行里面的handler方法，如果為 false就跟我們以前的效果一樣，不會(huì)在綁定的時(shí)候就執(zhí)行。

默認(rèn)情況下 handler 只監(jiān)聽(tīng)obj這個(gè)屬性它的引用的變化，我們只有給obj賦值的時(shí)候它才會(huì)監(jiān)聽(tīng)到，比如我們?cè)?mounted事件鉤子函數(shù)中對(duì)obj進(jìn)行重新賦值，當(dāng)需要監(jiān)聽(tīng)一個(gè)對(duì)象的改變時(shí)，普通的watch方法無(wú)法監(jiān)聽(tīng)到對(duì)象內(nèi)部屬性的改變，此時(shí)就需要deep屬性對(duì)對(duì)象進(jìn)行深度監(jiān)聽(tīng)。

watch: {
  obj: {
    handler(newName, oldName) {
      console.log("obj.a changed");
    },
    immediate: true,
    deep: true
  }

deep的意思就是深入觀察，監(jiān)聽(tīng)器會(huì)一層層的往下遍歷，給對(duì)象的所有屬性都加上這個(gè)監(jiān)聽(tīng)器，但是這樣性能開(kāi)銷就會(huì)非常大了，任何修改obj里面任何一個(gè)屬性都會(huì)觸發(fā)這個(gè)監(jiān)聽(tīng)器里的 handler。

優(yōu)化，我們可以是使用字符串形式監(jiān)聽(tīng)：

watch: {
  "obj.a": {
    handler(newName, oldName) {
      console.log("obj.a changed");
    },
    immediate: true,
    // deep: true
  }
} 

為什么要注銷 watch？因?yàn)槲覀兊慕M件是經(jīng)常要被銷毀的，比如我們跳一個(gè)路由，從一個(gè)頁(yè)面跳到另外一個(gè)頁(yè)面，那么原來(lái)的頁(yè)面的 watch 其實(shí)就沒(méi)用了，這時(shí)候我們應(yīng)該注銷掉原來(lái)頁(yè)面的 watch 的，不然的話可能會(huì)導(dǎo)致內(nèi)置溢出。好在我們平時(shí) watch 都是寫(xiě)在組件的選項(xiàng)中的，他會(huì)隨著組件的銷毀而銷毀。
但是，如果我們使用下面這樣的方式寫(xiě) watch，那么就要手動(dòng)注銷了，這種注銷其實(shí)也很簡(jiǎn)單：

const unWatch = app.$watch("text", (newVal, oldVal) => {
  console.log(`${newVal} : ${oldVal}`);
})
unWatch(); // 手動(dòng)注銷watch

app.$watch調(diào)用后會(huì)返回一個(gè)值，就是unWatch方法，你要注銷 watch 只要調(diào)用unWatch方法就可以了。

computed：當(dāng)頁(yè)面中有某些數(shù)據(jù)依賴其他數(shù)據(jù)進(jìn)行變動(dòng)的時(shí)候，可以使用計(jì)算屬性，需要注意的是，就算在data中沒(méi)有直接聲明出要計(jì)算的變量，也可以直接在computed中寫(xiě)入。

computed: {  
            fullName: function () {  
                return this.firstName + " " + this.lastName  
            }  
        }  

計(jì)算屬性默認(rèn)只有g(shù)etter，可以在需要的時(shí)候自己設(shè)定setter：

    computed: {
        fullName: {
            // getter
            get: function () {
                return this.firstName + " " + this.lastName
            },
            // setter
            set: function (newValue) {
                var names = newValue.split(" ")
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        }
    }

這個(gè)時(shí)候在控制臺(tái)直接運(yùn)行vm.fullName = ‘bibi wang’，相應(yīng)的firstName和lastName也會(huì)改變。
適用場(chǎng)景：一個(gè)數(shù)據(jù)受多個(gè)數(shù)據(jù)影響。
watch：watch用于觀察和監(jiān)聽(tīng)頁(yè)面上的vue實(shí)例，當(dāng)然在大部分情況下我們都會(huì)使用computed，但如果要在數(shù)據(jù)變化的同時(shí)進(jìn)行異步操作或者是比較大的開(kāi)銷，那么watch為最佳選擇。watch為一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。值也可以是方法名，或者包含選項(xiàng)的對(duì)象

watch: {
            firstName: function (val) {
                this.fullName = val + " " + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + " " + val
            }
        }

適用場(chǎng)景：一個(gè)數(shù)據(jù)影響多個(gè)數(shù)據(jù)。

需要注意的是，computed是具有緩存的，這就意味著只要計(jì)算屬性的依賴沒(méi)有進(jìn)行相應(yīng)的數(shù)據(jù)更新，那么computed會(huì)直接從緩存中獲取值，多次訪問(wèn)都會(huì)返回之前的計(jì)算結(jié)果。

版本號(hào)：V2.8.3
更新日期：2018-07-09