watch侦听器（监听器）功能是监听数据变化，执行一些业务逻辑 或 异步操作。

核心选项

• ‌handler‌    监听函数，接收 (newVal, oldVal) 作为参数。
• ‌deep: true    深度监听对象/数组内部变化。
• ‌immediate: true‌    在组件创建时立即触发一次回调。
• flush: 'post'‌    在 DOM 更新后触发回调（Vue 3 新增、此处暂不介绍）。

简单写法

简单类型数据，直接监视。

export default {
  data() {
    return {
      message: 'Hello',
      user: { name: 'Alice', age: 30 }
    }
  },
  watch: {
    // 监听简单数据类型
    message(newVal, oldVal) {
      console.log('消息变化:', newVal, oldVal);
    },
    // 监听对象某个属性
    'user.name'(newVal) {
      console.log('用户名变化:', newVal);
    }
  }
}

完整写法

1. deep:true 对复杂类型深度监视
2. immediate: true 初始化立刻执行一次handler方法

data: {
    obj: {
        words: '',
        lang: ''
    },
    result: '',
    // timer: ''    //与页面渲染无关的属性可以不用写在data中，直接在方法中this.timer就行	
},
watch: {
    'obj': {
        deep: true,
        immediate: true,
        handler (newValue) {
            // 防抖：延迟执行-干啥先等等
            clearTimeout(this.timer)
            this.timer = setTimeout(async () => {
                const res = await axios({
                    url: '自己的接口',
                    params: {
                        words: newValue.words,
                        lang: lang
                    }
                })
                this.result = res.data.data
                console.log(res.data.data)
            }, 300)
        }
    } 
}

常见问题 

1. 为什么旧值 (oldVal) 不更新？

• ‌对象/数组类型‌：直接修改内部属性时，oldVal 可能与 newVal 相同（需开启 deep: true）。
• ‌响应式数据‌：确保监听的是通过 ref/reactive 声明的响应式数据。

2. 监听失效？

• 检查数据是否响应式（如直接解构 reactive 对象会失去响应性）。
• 确保路径正确（如 'user.name' 在选项式 API 中需用引号包裹）。

3. 性能优化

• 避免过度使用 deep: true，尤其是大型对象。
• 考虑用 computed 计算属性代替简单依赖。

总结

• 使用场景‌：数据变化需要触发异步操作、复杂逻辑或 DOM 更新。
• ‌避免场景‌：频繁同步操作（可能影响性能）。
• ‌替代方案‌：简单计算用 computed，表单验证用 v-model + 事件。

通过合理使用 watch，可以更灵活地控制数据流和交互逻辑。