使用vm.$watch API创建的监听器是否需要在组件destroyed钩子中手动移除？

你完全不用纠结这个问题——只要是通过当前组件实例的vm.$watch监听自身的响应式属性，组件销毁时Vue会自动帮你清理这些监听器，不需要手动调用返回的unwatch()函数，也不会导致内存泄漏。

为什么不需要手动清理？ #

• 声明式的watch选项和动态的vm.$watch底层逻辑是一致的：声明式watch最终也是通过调用$watch来创建监听器的，既然声明式的不用你手动清理，动态的自然也不用。
• Vue在组件销毁流程中会自动处理所有依附于该实例的资源：当组件进入销毁阶段时，Vue会遍历实例上注册的所有监听器（包括通过$watch添加的），自动调用对应的unwatch函数，解除响应式依赖，释放相关内存。

什么时候需要手动调用unwatch()？ #

只有一种场景需要你手动处理：当你用vm.$watch监听的不是当前组件实例自身的响应式属性，比如：

• 全局的响应式对象（比如全局状态管理里的对象）
• 另一个Vue组件实例的属性
• 用reactive包装过的外部独立对象

举个例子，这种情况就需要手动清理：

// 假设externalObj是全局的响应式对象，不属于当前组件
const unwatch = this.$watch(() => externalObj.x, (newVal) => {
  // 处理逻辑
})

// 在组件销毁时手动调用清理
this.$on('hook:destroyed', () => {
  unwatch()
})

文档没提的原因 #

Vue的文档和风格指南没特意说明这点，是因为这属于Vue默认帮你兜底的底层细节——就像你不用手动清理组件绑定的DOM事件监听一样，这类资源回收都是框架自动处理的范畴，没必要特意强调。

内容的提问来源于stack exchange，提问作者sgarcia.dev