vue 使用了真的很长时间了, 但越是使用, 越是去看 API, 就越发现, 一直使用的 API 都仅仅是使用, 而且使用的还不够到位. 之前分享过计算属性 computed 和 watch 的区别, 今天因为有个需求使用 watch, 重新看了一下官网文档, 发现对 watch 一无所知.
watch 观察 vue 实例的变化, 回调函数参数为新值和旧值, 先看基础写法:
- watch:{
- msg(a, b){
- console.log(a);
- console.log(b);
- }
- },
watch 监听的必须是 data 的数据, 当数据发生改变, 就会执行.
有配置的写法:
- msg: {
- handler:(a, b) =>{
- console.log(a);
- console.log(b);
- },
- deep: true,
- immediate: true
- }
deep: 为了发现内部值的变化, 数组不需要, 简单说就是一个对象如果想要监听深层次的变化, 想要使用, 普通变量是不需要的.
immediate: 是否初始化就触发, true 为立即执行, 注意, 如果使用了, 新值是 undefined.
watch 可以监听数组:
- watch:{
- arr(a, b){
- console.log(a);
- console.log(b);
- },
- },
要注意, 对象可以直接监听某个 key:
- watch:{
- 'obj.a'(a, b){
- console.log(a);
- console.log(b);
- },
- },
当 a 变化的时候是可以监听到的, 如果不写 deep, 是不能监听到的:
- watch:{
- obj(a, b){
- console.log(a);
- console.log(b);
- },
- },
上面 obj 有变化的时候不执行, 下面的方法才会执行:
- obj: {
- handler: (a, b) => {
- console.log(a);
- console.log(b);
- },
- deep: true
- }
有一点要注意, 在变异 (不是替换) 对象或数组时, 旧值将与新值相同, 因为它们的引用指向同一个对象 / 数组. Vue 不会保留变异之前值的副本. 这也是为什么说 computed 性能会好一些, computed 是从缓存中获取:
- watch:{
- obj: {
- handler: (a, b) => {
- console.log(a);
- console.log(b);
- },
- deep: true
- }
- },
输出的新值旧值都是一样的
vm.$watch 返回一个取消观察函数, 用来停止触发回调, 但是不知道在实例里面怎么操作.
image.PNG
来源: http://www.jianshu.com/p/6c71c1330990