VUE 监视属性——watch

 

　　watch: {

　　　　isHot: {

　　　　　　immediate: true, // 初始化时让 handler 调用一下

　　　　　　// handler 什么时候调用？当 isHot 发生改变时

　　　　　　handler(newValue, oldValue) {

　　　　　　　　console.log('isHot被修改了', newValue, oldValue)

　　　　　　}

　　　　}

　　}

 

 

• 简写形式

　　　　watch: {

　　　　　　isHot(newValue, oldVaule) {

　　　　　　　　console.log('isHot被修改了', newValue, oldValue);

　　　　　　}

　　　　}

• 深度监听

　　　　deep: true

　　　   （1）Vue 中的 watch 默认不监测对象内部值的改变（一层）。

　　　　（2）配置 deep: true 可以监测对象内部值改变（多层）。

　　　　备注：

　　　　　　（1）Vue 自身可以监测对象内部值的改变，但 Vue 提供的 watch 默认不可以！

　　　　　　（2）使用 watch 根据数据的具体结构，决定是否采用深度监听。

总结：

　　1. 当被监听的属性变化时，回调函数自动调用，进行相关操作

　　2. 监听的属性必须存在（ data 或 computed 中存在），才能进行监听

　　3. 监听的两种写法：

　　　　（1）new Vue时传入 watch 配置

　　　　（2）通过 vm.$watch 监听，vm.$watch('xxx') 要加引号，否则会读取变量是否存在

标签：VUE,handler,watch,isHot,newValue,Vue,监视,监听
来源： https://www.cnblogs.com/bulu08042/p/15611565.html