- Vue.js從入門到項目實踐(超值版)
- 聚慕課教育研發(fā)中心編著
- 340字
- 2022-07-29 14:27:41
4.1.4 watch函數(shù)

Vue提供了一種通用的方式來觀察和響應(yīng)Vue實例上的數(shù)據(jù)變動,那就是watch屬性。watch屬性是一個對象,它有兩個屬性:一個是鍵;另一個是值。鍵是需要觀察的表達式,值是對應(yīng)回調(diào)函數(shù),回調(diào)函數(shù)得到的參數(shù)為新值和舊值。值也可以是方法名,或者包含選項的對象。Vue實例將會在實例化時調(diào)用$watch(),遍歷watch對象的每一個屬性。
提示:不應(yīng)該使用箭頭函數(shù)來定義watch函數(shù)。
代碼如下:

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

圖4-7 watch運行效果圖
在上面所顯示的代碼中,當(dāng)a的值發(fā)生變化時,通過watch的監(jiān)控,message輸出相應(yīng)的內(nèi)容。
除了使用數(shù)據(jù)選項中的watch方法以外,還可以使用實例對象的$watch(),該方法的返回值是一個取消觀察函數(shù),用來停止觸發(fā)回調(diào)。代碼如下:

在上面的代碼中,當(dāng)a的值更新到1時,觸發(fā)unwatch()來取消觀察。單擊按鈕時,a的值仍然會變化,但是不再觸發(fā)watch的回調(diào)函數(shù)。
推薦閱讀
- 柳工出海:中國制造的全球化探索
- 中文版Flash CC完全自學(xué)教程
- 網(wǎng)頁設(shè)計那些事兒
- 園區(qū)網(wǎng)互聯(lián)及網(wǎng)站建設(shè)
- 全能網(wǎng)頁設(shè)計師精煉手冊
- HTML+CSS+JavaScript網(wǎng)頁制作案例教程(第2版)
- JSP動態(tài)網(wǎng)站開發(fā)案例指導(dǎo)
- HTML+CSS+JavaScript網(wǎng)頁制作(第2版)
- 寬帶接入技術(shù)
- 在實戰(zhàn)中成長:JSP開發(fā)之路
- Dreamweaver CS3網(wǎng)頁制作
- 建筑CAD繪圖技術(shù)(第2版)
- Dreamweaver CS6網(wǎng)頁設(shè)計入門、進階與提高
- Dreamweaver,F(xiàn)lash,F(xiàn)ireworks網(wǎng)頁設(shè)計百練成精(CS3版)
- HTML+CSS+JavaScript網(wǎng)頁制作從新手到高手