watch

watch也是配置项之一，用来监听data中数据的改变，从而执行某些操作

1.对象语法

watch是一个对象，可以在里面定义函数，也可以是对象

需要监听data中哪个数据，就在watch中添加一个名字一样的对象

监听器的对象语法允许我们有更多的配置

对象写法中必须包含一个名为handler的函数，

export default{
    data:{
        num:111
    },
    watch:{
        num:{
            handler(newVal, oldVal){
                // ...
            },
            immediate: true,
            deep:true
        }
    }
}

• handler：监听的回调函数，当被监视的属性变化时，监听函数会自动调用

  • 第一个形参数是data中数据修改前的新值
  • 第二个是修改后的旧值

• immediate：若为true，则组件挂载时会自动调用一次，默认为false

• deep：若监听的数据是一个对象，可以监听深层数据的改变，默认为false

​

2.函数语法

当定义函数时，需要监听哪个属性，方函数名就和哪个属性名一样

此时监听函数相当于对象写法的handler()，不过函数语法不能写immediate和deep

export default{
    data:{
        num:111
    },
    watch:{
        num(newVal, oldVal){
			// ...
        }
    }
}

3.与计算属性的区别

computed和watch之间的区别

• computed能完成的功能，watch都可以完成

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

• 计算属性：计算属性有缓存、并且是响应式依赖缓存，调用不加小括号

• 侦听器：侦听器无缓存，侦听模型数据变化，不能调用

两个重要的小原则

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

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