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

最新推荐文章于 2025-10-11 22:42:15 发布

原创最新推荐文章于 2025-10-11 22:42:15 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

11 篇文章

订阅专栏

vue

5 篇文章

订阅专栏

本文详细介绍了Vue中的深度监听，包括普通监听与深度监听的区别，特别是针对数组变化的监听问题提供了解决方案。同时，文章探讨了Vue的`nextTick`用法，阐述了其在DOM更新和生命周期钩子函数中的重要性，以及`$nextTick`与`nextTick`的异同，强调了何时使用它们来确保正确的DOM操作顺序。

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发生变化，更新后执行的回调。