vue3中watch监听销毁

如何在 Vue 3 中正确销毁 watch 监听器
在 Vue 3 中，为了防止不必要的资源占用以及避免内存泄漏等问题，在不再需要监听某些数据变化时应当及时停止相应的 watch 监听。对于组件内部定义的响应式依赖关系而言，可以通过返回一个取消订阅函数的方式来实现这一点。
当创建一个 watch 监听器时，可以将其赋值给一个常量或变量，并通过调用该变量来停止监听。下面给出具体的代码示例：
<script setup lang="ts">
import { watch, reactive } from 'vue';

let data = reactive({
val: 2,
});

// 将 watch 的结果存储在一个名为 stopWatch 的变量中
const stopWatch = watch(
() => data.val,
(newVal) => {
console.log(`新的值为 ${newVal}`);

// 当满足特定条件时，执行此回调内的逻辑并停止监听
if (newVal >= 6) {
stopWatch();
}
},
{ immediate: true, deep: true }
);

function add() {
data.val++;
}
</script>
登录后复制
上述例子展示了如何利用 stopWatch() 方法手动终止对 data.val 属性改变的监视过程[^2]。需要注意的是，如果是在组合式 API (<script setup>) 下使用，则可以直接按照这种方式处理；而在选项式 API 中则需考虑将清理工作放在合适的生命周期钩子内完成，比如 beforeUnmount 阶段[^3]。
另外值得注意的一点是，除了显式的调用停止方法外，还可以借助于 Vue 组件自身的生命周期机制自动管理这些副作用。例如可以在卸载组件之前自动清除所有的侦听器，从而简化开发者的工作流程[^1]。