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') 要加引号，否则会读取变量是否存在

watch 和 computed 的区别

　　1. computed 能完成的功能，watch 都可以完成

　　2. watch 能完成的功能，computed 不一定能完成，例如： watch 可以进行异步操作

　 两个重要的小原则：

　　　　1. 被Vue 管理的函数，最好写成普通函数，这样 this 的指向才是 vm 或 组件实例对象。

　　　　2. 所有不被 Vue 管理的函数（定时器的回调函数、ajax 的回调函数等），最好写成箭头函数，这样 this 的指向才是 vm 或 组件实例对象。