vue2watch监听不触发

### Vue2 中 `watch` 不触发的原因及解决方案

#### 1. 数据响应性问题
如果被监听的对象不是响应式的，则 `watch` 将不会触发。确保所监控的数据是通过 Vue 实例的 `data` 或者 `computed` 属性定义出来的，这样才能保证其具有响应性[^1]。

new Vue({
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`message changed from ${oldValue} to ${newValue}`);
    }
  }
});

#### 2. 深度监听对象属性变化
对于复杂数据类型的变量（如数组或对象），默认情况下仅会监视该引用的变化而不是内部值的变化。为了捕获这些深层嵌套结构内的更改，需设置 `{ deep: true }` 参数来开启深度监听模式。

// 正确的方式去监听对象中的某个字段改变
export default {
  props: ['someObject'],
  watch: {
    someObject: {
      handler(newVal, oldVal){
        // do something...
      },
      deep: true,
      immediate: false // 如果希望初始化时就执行一次handler可以设为true
    }
  }
}

#### 3. 初始化立即调用处理程序
有时可能期望当组件首次渲染完成之后立刻运行观察者的回调逻辑，在这种场景下应该配置选项 `immediate:true` 来实现这一点。

watch: {
  propData: {
    handler(val) { /* ... */ },
    immediate: true
  }
}

#### 4. 父子组件间通信引发的问题
由于Vue采用的是异步更新机制，因此可能会遇到父子组件之间 `watch` 执行顺序不确定的情况。虽然通常父级会在子级之前触发 `watch` ，但这并非总是如此；尤其是在涉及复杂的依赖关系或是使用了某些性能优化措施的情况下[^2]。

为了避免此类潜在冲突，建议：

- 使用事件总线或其他形式的状态管理工具来进行跨层级组件间的通讯；
- 调整业务逻辑设计以减少对特定 `watch` 触发时机的依赖。