4.1.4　watch函數

Vue提供了一種通用的方式來觀察和響應Vue實例上的數據變動，那就是watch屬性。watch屬性是一個對象，它有兩個屬性：一個是鍵；另一個是值。鍵是需要觀察的表達式，值是對應回調函數，回調函數得到的參數為新值和舊值。值也可以是方法名，或者包含選項的對象。Vue實例將會在實例化時調用$watch()，遍歷watch對象的每一個屬性。

提示：不應該使用箭頭函數來定義watch函數。

代碼如下：

運行的效果如圖4-7所示。

圖4-7　watch運行效果圖

在上面所顯示的代碼中，當a的值發生變化時，通過watch的監控，message輸出相應的內容。

除了使用數據選項中的watch方法以外，還可以使用實例對象的$watch()，該方法的返回值是一個取消觀察函數，用來停止觸發回調。代碼如下：

在上面的代碼中，當a的值更新到1時，觸發unwatch()來取消觀察。單擊按鈕時，a的值仍然會變化，但是不再觸發watch的回調函數。