對Vue.js $watch方法的理解

博主最近對着vue.js的官方教程在自學vue.js，博主自幼愚鈍，在教程中真的是好多點都不太理解，接下來要說的這個$watch方法就是其中一個不太理解的點了。咱們先來看一下對於$watch方法在vue.js的API中是怎么解釋的吧：觀察 Vue 實例變化的一個表達式或計算屬性函數。回調函數得到的參數為新值和舊值。表達式只接受監督的鍵路徑。對於更復雜的表達式，用一個函數取代。官方示例：

// 鍵路徑
vm.$watch('a.b.c', function (newVal, oldVal) {
  // 做點什么
})
// 函數
vm.$watch(
  function () {
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // 做點什么
  }
)
vm.$watch 返回一個取消觀察函數，用來停止觸發回調：

var unwatch = vm.$watch('a', cb)
// 之后取消觀察
unwatch()

博主很認真地看了看，當時就懵逼了，沒看懂。還好網上大神多，查了查終於搞明白這個$watch方法的用法了。說白了$watch這貨就是觀察一個值的變化，觀察的這個值一變化的話，那么就執行function里面的語句。廢話不多說，咱們直接看代碼：

HTML：

<div id="watch">
        firstName:<input type="text" name="li"  v-model="firstName">
        <br>
        lastName:<input type="text" name="fei"  v-model="lastName">
        <p>fullName: {{fullName}}</p>
6 </div>

JS：

var vm = new Vue({
            el: '#watch',
            data: {
                firstName: 'a',
                lastName: 'fei',
                fullName: 'a fei'
            },
            watch: {
                firstName: function (val) {
                    this.fullName = val + ' ' + this.lastName
                },
                lastName: function (val) {
                    this.fullName = this.firstName + ' ' + val
                }
            }
})

在代碼中，我們用watch方法監聽了firstName和lastName這兩個變量，我們在input框框那里做了雙綁定，這樣子的話，我們在firstName輸入框中輸入的值就會改變變量firstName的值，同理可得lastName，因為值的改變和watch這貨的觀察，所以watch里面的function代碼就會運行，這樣子fullName也就會相應地改變了。這樣子$watch這方法的用法也就一下子明了了。上述的例子中$watch就和原生js里面的on-change差不多了。

以上就是博主對$watch方法的理解了，希望可以幫助大家理解這一方法，要是上述有何不對的地方，麻煩各位看官多多指出，謝謝大家。

《轉載需標明出處》