this.$watch

watch 与 this.$watch 核心区别

watch（选项式）在组件初始化阶段（created前）就创建监听，若数据是异步请求的，初始化时监的是空值；this.watch可以等异步数据请求回来后再创建监听，避开无效空值监听。但this.watch需要手动销毁，一般在组件销毁前（beforeDestroy）执行；选项式watch由Vue自动创建+自动销毁，无需手动处理。二者其他功能和底层逻辑完全一致。

#1. 核心定位

二者都是Vue监听响应式数据变化的方式，底层逻辑、功能（深度监听/立即执行）完全一致，仅在监听创建时机、销毁方式上有区别，本质是「自动托管」和「手动控制」的差异。

2. 选项式 watch（直接写在配置里）

• 创建时机：组件初始化阶段（created之前）自动创建，监听从组件诞生就生效；
• 销毁方式：组件销毁时Vue自动销毁，无需手动操作，省心；
• 适用场景：数据初始化就有值、不在意初始空值；或简单场景，不想写额外手动代码；
• 关键特点：默认只监数据变化，初始空值不会触发回调，无额外副作用；仅开 immediate: true 时，才会触发初始空值的回调，需加非空判断。

3. this.$watch（手动调用方法）

• 创建时机：手动调用时才创建，时机完全可控（可写在mounted/异步请求成功后）；
• 销毁方式：调用后返回销毁函数，需手动在 beforeDestroy 执行销毁，否则会内存泄漏；
• 适用场景：异步请求数据的场景，可等数据拿到（有有效值）后再创建，彻底避开初始空值；
• 关键特点：精准匹配数据有效时机，无需处理空值相关逻辑；想创建后立即执行回调，开 immediate: true 也只会触发有效值，不用加判断。

4. 开发选择原则（一句话记）

• 数据早有值/不在意空值 → 用选项式watch（省心，自动托管）；
• 异步数据/想避开初始空值 → 用this.$watch（灵活，时机精准）。

5. 高频易错点

• 选项式watch监初始空值默认不触发回调，不用额外写非空判断，只有开 immediate: true 才需要；
• this.$watch创建时的当前值是「基准值」，不会触发回调，只有后续值变化才会触发；
• this.$watch是手动创建一次，销毁即失效，想重新监听需再次调用方法。