對Vue.js $watch方法的理解

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

 1 // 鍵路徑
 2 vm.$watch('a.b.c', function (newVal, oldVal) {
 3   // 作點什麼
 4 })
 5 // 函數
 6 vm.$watch(
 7   function () {
 8     return this.a + this.b
 9   },
10   function (newVal, oldVal) {
11     // 作點什麼
12   }
13 )
14 vm.$watch 返回一個取消觀察函數，用來中止觸發回調：
15 
16 var unwatch = vm.$watch('a', cb)
17 // 以後取消觀察
18 unwatch()

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

HTML：

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

JS：

 1 var vm = new Vue({
 2             el: '#watch',
 3             data: {
 4                 firstName: 'a',
 5                 lastName: 'fei',
 6                 fullName: 'a fei'
 7             },
 8             watch: {
 9                 firstName: function (val) {
10                     this.fullName = val + ' ' + this.lastName
11                 },
12                 lastName: function (val) {
13                     this.fullName = this.firstName + ' ' + val
14                 }
15             }
16 })

在代碼中，咱們用watch方法監聽了firstName和lastName這兩個變量，咱們在input框框那裏作了雙綁定，這樣子的話，咱們在firstName輸入框中輸入的值就會改變變量firstName的值，同理可得lastName，由於值的改變和watch這貨的觀察，因此watch裏面的function代碼就會運行，這樣子fullName也就會相應地改變了。這樣子$watch這方法的用法也就一會兒明瞭了。上述的例子中$watch就和原生js裏面的on-change差很少了。

以上就是博主對$watch方法的理解了，但願能夠幫助你們理解這一方法，要是上述有何不對的地方，麻煩各位看官多多指出，謝謝你們。

《轉載需標明出處》