前言

前面講到了計(jì)算屬性computed，這次講的是監(jiān)控器watch，主要任務(wù)就是監(jiān)控變量的變化

正文

watch是一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。值也可以是方法名，或者包含選項(xiàng)的對(duì)象。

watch的特點(diǎn)：

1.當(dāng)變量變化時(shí)調(diào)用函數(shù)
2.如果不設(shè)置immediate則在初始綁定值時(shí)不會(huì)執(zhí)行

watch有兩個(gè)選項(xiàng)：

1.deep選項(xiàng)：表示深層遍歷，當(dāng)需要監(jiān)控對(duì)象內(nèi)部值的變化時(shí)，可以在選項(xiàng)參數(shù)中指定 deep: true。注意監(jiān)聽數(shù)組的變動(dòng)不需要這么做

2.immediate選項(xiàng)：如果在選項(xiàng)參數(shù)中指定 immediate: true，將立即觸發(fā)監(jiān)控中變量的函數(shù)（如果我們需要在最初綁定值的時(shí)候也執(zhí)行監(jiān)控函數(shù)，就需要用到immediate屬性）

?watch的簡(jiǎn)單用法：

watch:{// 監(jiān)聽stuName的變化情況stuName: function(newVal, oldVal){//stuName是數(shù)組變量，newVal是屬性變化后的值，oldVal是屬性變化前的值 console.log(newVal,oldVal);} }

?

watch中的鍵也可以是$route之類的的實(shí)例屬性：

watch: {'$route': function(newVal, oldVal){console.log(newVal,oldVal);} }

?

watch對(duì)象的值也可以是方法名：

watch: {dataName: 'getPath' }， methods: {getPath:function(){} }

?

當(dāng)watch監(jiān)控對(duì)象時(shí)有兩種方法：

方法一：（在只監(jiān)控對(duì)象內(nèi)某一屬性變化時(shí)使用）

watch:{'obj.a':{ //加引號(hào)監(jiān)聽對(duì)象里的屬性 handler(newValue,oldValue){console.log('obje changed')}} }

?

方法二：（當(dāng)需要監(jiān)控對(duì)象的所有屬性變化時(shí)使用）

watch:{obj:{handler(newValue,oldValue){//此函數(shù)名是vue提供的console.log('obje changed')},deep:true} }

?

本文原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處：https://www.cnblogs.com/zhangdongya/p/11304223.html?

轉(zhuǎn)載于:https://www.cnblogs.com/zhangdongya/p/11304223.html

總結(jié)

以上是生活随笔為你收集整理的Vue监控器watch的全面解析的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。