vue3终止watch监听的办法

valives

已于 2022-10-21 13:24:18 修改

阅读量9.9k

点赞数 5

分类专栏： web前端文章标签：前端 vue

于 2022-07-04 18:02:09 首次发布

本文链接：https://blog.csdn.net/weixin_45807026/article/details/125605696

版权

web前端专栏收录该内容

49 篇文章

订阅专栏

本文介绍了Vue3中如何实现watch监听的启动与停止。通过将watch赋值给变量，可以方便地控制监听的开始与结束。适用于需要周期性监测状态变化并能够按需调整监听的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3终止watch监听的办法是：
将watch赋值给一个变量，当达到条件调用watch赋值的那个变量就可以终止监听了。如：

let stopWatch = watch(() => state.room, (newval, oldval) => {
    console.log("新值:", newval, "老值:", oldval);
}, 
{deep:true}//复杂嵌套的数据没有这个指令是无法检测到的。
);

setTimeout(()=>{
    // 停止监听
    stopWatch()
}, 5000)

重新启动监听的办法就是通过把监听器重新赋值给变量

    stopWatch = watch(
    () => search,
    (newval, oldval) => {
      console.log("新值:", newval, "老值:", oldval);
    },
    { immediate: true, deep: true } //复杂嵌套的数据没有这个指令是无法检测到的。
  );