4.1.4　watch函數(shù)

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

提示：不應(yīng)該使用箭頭函數(shù)來定義watch函數(shù)。

代碼如下：

運(yùn)行的效果如圖4-7所示。

圖4-7　watch運(yùn)行效果圖

在上面所顯示的代碼中，當(dāng)a的值發(fā)生變化時，通過watch的監(jiān)控，message輸出相應(yīng)的內(nèi)容。

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

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