watch示例

![书桌.jfif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6622ae1b1f234f458e645e15b15970cc~tplv-k3u1fbpfcp-watermark.image?) (图片来源于网络,如侵删) ## 前言侦听器主要是用来监听数据的变化,通常是在数据变化时执行 ## Vue官方说明 watch是一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象 ## 使用watch的简单示例 ```js watch示例

今天心情so {{ isHappy?'happy':'sad' }}

``` 本示例已经实例化了vm,也可用如下方法调用watch属性(此时不需要在实例内部再定义watch): ```js vm.$watch('isHappy',{ handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }) ``` ## watch的immediate属性使用watch监视数据变化时，当值第一次绑定(页面加载时)不会执行监听函数，只有值发生改变才会执行。若要在第一次绑定(页面加载时)也执行函数，需要添加以下属性 `immediate: true` ## watch的deep属性 Vue中的watch默认不监视对象内部值的改变,即只监视第一层数据,如果需要监视第二层或以上层数据,需要添加以下属性: `deep: true` ##### 注:Vue自身是可以监测对象内部值的改变，但Vue提供的watch默认不可以！ ## 补充两个小原则 (1)所有被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或组件实例对象. (2)所有不被Vue所管理的函数(例如:定时器的回调函数、ajax的回调函数、Promise的回调函数等),最好写成箭头函数,这样this的指向才是vm 或组件实例对象. ## 最后希望整理的信息对您有所帮助,喜欢的话请帮忙点赞如果有什么建议,欢迎在评论区留言不足之处还请批评指教,谢谢!