Vue watch
的深度监听
watch监听有两种方式:普通监听、深度监听。
他们的区别是:
-
普通监听只能监听变量值的变化(如Boolean、Number、String等),不能监听数组和变量属性的改变。
-
写法上的区别:
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发生变化,更新后执行的回调。