vue3终止watch监听后继续监听

当你终止了Vue3中的watch监听后，如果需要重新启动监听，你可以通过把监听器重新赋值给变量的方式重新启动监听。具体操作方法如下：
1.将watch赋值给一个变量，如let stopWatch = watch(() => state.room, (newval, oldval) => {console.log("新值:", newval, "老值:", oldval);},{deep:true});//复杂嵌套的数据没有这个指令是无法检测到的。
2.当需要终止监听时，调用stopWatch()。
3.当需要重新启动监听时，通过把监听器重新赋值给变量的方式重新启动监听，如stopWatch = watch(() => search, (newval, oldval) => {console.log("新值:", newval, "老值:", oldval);},{immediate: true, deep: true});//复杂嵌套的数据没有这个指令是无法检测到的。

--相关问题--:

相关问题

vue3终止watch监听方法的原理

在Vue 3中，watch监听方法的终止是通过返回一个停止监听的函数来实现的。当你调用watch函数时，会返回一个用于停止监听的函数。当你想要停止监听时，只需调用该函数即可。

这种实现方式的原理是利用了JavaScript的闭包特性。当你调用watch函数时，它会创建一个内部的监听器函数，并将该函数保存在内存中。当监听的数据发生变化时，这个内部的监听器函数会被触发执行。而返回的停止监听函数则可以访问到这个内部的监听器函数，从而可以在需要停止监听时将其从内存中移除。

这种方式的好处是可以灵活地控制监听的生命周期。你可以在任何时候调用停止监听函数来终止对数据的监听，从而避免不必要的资源消耗。

vue3实现watch监听

### Vue3 中 `watch` 监听方法详解

#### 单个基本数据类型的监听
当需要监听由 `ref` 创建的基本数据类型时，可以采用如下形式：

import { ref, watch } from 'vue';

const sum = ref(122);
watch(sum, (newValue, oldValue) => {
    console.log(`sum changed from ${oldValue} to ${newValue}`);
});

这种方式适用于简单的数值、字符串或其他基础类型的变量监控[^1]。

#### 多个基本数据类型的监听
对于多个基于 `ref` 的简单数据类型的同时监听，则可以通过数组的形式传递给 `watch` 函数：

import { ref, watch } from 'vue';

let sum = ref(122);
let tipsmessage = ref("hello");

watch([sum, tipsmessage], ([newSum, newMessage], [oldSum, oldMessage]) => {
    console.log(`sum changed from ${oldSum} to ${newSum}, message changed from "${oldMessage}" to "${newMessage}"`);
});

此模式允许同时观察多个独立的基础型态的变化情况。

#### 对象整体的监听
如果目标是一个通过 `reactive` 定义的对象，那么可以直接将其作为参数传入 `watch` 来跟踪整个对象的状态变更：

import { reactive, watch } from 'vue';

const obj = reactive({
    name: "老王",
    age: "50"
});

watch(obj, (newValue, oldValue) => {
    console.log('object has been updated');
}, { deep: true });

注意这里加入了 `{deep:true}` 配置项来确保能够捕捉到深层次嵌套属性的变化。

#### 特定属性的监听
针对特定字段而非整个对象的情况，可利用箭头函数返回所需关注的具体路径表达式来进行精准定位：

import { reactive, watch } from 'vue';

const obj = reactive({
    test: {
        salary: 3000,
        year: 1,
    }
});

// 只监听test.salary这一条目下的变动
watch(() => obj.test.salary, (newValue, oldValue) => {
    console.log(`salary changed from ${oldValue} to ${newValue}`);
});

这种方法提供了更细粒度控制的能力，只对感兴趣的那部分状态作出反应。

#### 组合监听多级嵌套结构内的若干属性
最后一种情形涉及到了复杂的数据模型中挑选出几个关键点进行联合监测：

import { reactive, watch } from 'vue';

const obj = reactive({
    test: {
        salary: 3000,
        year: 1,
    },
    otherProp: {}
});

watch(
    () => ({ salary: obj.test.salary, year: obj.test.year }),
    ({ salary, year }, { prevSalary, prevYear }) => {
        console.log(`salary or year changed. New values are: salary=${salary}, year=${year}. Previous were: salary=${prevSalary}, year=${prevYear}`);
    }
);

上述代码展示了如何有效地处理深层嵌套对象内选定成员变量之间的相互依赖关系并及时响应其改变事件。