Vue watch() 的用法和 nextTick的用法

Vue watch的深度监听

watch监听有两种方式：普通监听、深度监听。

他们的区别是：

1. 普通监听只能监听变量值的变化（如Boolean、Number、String等），不能监听数组和变量属性的改变。

2. 写法上的区别：

    watch:{
        // 普通的watch监听
        a(val, oldVal){
            console.log("a: "+val, oldVal);
        },
        // 深度监听，可监听到对象、数组的变化
        b:{
            handler(val, oldVal){
                console.log("b.c: "+val.c, oldVal.c);
            },
            deep:true  // true 深度监听
        }
    }
   

【注意】可能遇到数组的变化不能监听到的问题？这样解决：

使用$set()、$remove()操作数组。

Vue nextTick的用法

应用场景

• 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。
• 在uni-app生命周期中的onReady()钩子函数中进行的Dom操作同上。

【原因】在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。

使用方法

this.$nextTick(function(){
    // 各种操作
})

$nextTick 和 nextTick 的不同

this.nextTick(callback)：当数据发生变化，更新后执行回调。
this.$nextTick(callback)：当dom发生变化，更新后执行的回调。