vue2.0用 watch 观察 prop 变化 不触发

在Vue2.0中，使用`watch`来观察`prop`的变化时，有几种情况可能会导致不触发`watch`的回调函数。

首先，需要确保正确设置了要观察的`prop`。`props`是父组件传递给子组件的属性，子组件通过`props`选项来接收这些属性。在Vue2.0中，`props`是用于接收数据的，而不是直接在子组件中定义和修改数据。当接收的`prop`在数据发生变化时，`watch`会触发回调函数。如果没有正确设置`props`选项或没有正确传递`prop`给子组件，`watch`就无法感知到`prop`的变化。

其次，需要注意`watch`选项的写法。`watch`选项是一个对象，包含一个或多个属性，每个属性的 key 是要观察的`prop`的名称，value 是回调函数，在`prop`发生变化时调用。在定义`watch`时，需要注意`prop`的命名和大小写是否和实际使用的`prop`一致，如果不一致，`watch`无法监听到`prop`的变化。

最后，还有一种情况是`watch`选项的写法不正确。在Vue中，`watch`选项可以直接定义为一个函数，也可以定义为一个对象，对象中的每个属性都是要观察的`prop`，而值则是一个函数。如果定义为函数，函数的参数是要观察的`prop`的新值和旧值。如果定义为对象，需要确保每个属性都是要观察的`prop`的名称，并且对应的值是一个函数。

综上所述，如果`watch`无法触发，应该检查是否正确设置了`props`选项和传递`prop`给子组件，是否正确定义了`watch`选项的写法，以及是否确保命名和大小写的准确性。

相关问题

vue2.0用 watch 观察 prop 变化(不触发)

在Vue 2.0中，我们可以使用watch属性来观察prop的变化，但是不触发watch的回调函数。这是因为Vue默认会在父组件传递给子组件的prop发生变化时，自动更新子组件的数据和视图。

如果我们希望监听prop的变化，但不触发watch回调函数，我们可以使用immediate修饰符。通过在watch属性中添加immediate: true，可以让Vue在初始化组件时不触发watch回调函数。代码如下所示：

props: {
  name: {
    type: String,
    default: ''
  }
},
watch: {
  name: {
    immediate: true,
    handler(newValue, oldValue) {
      // 在prop变化时不触发watch回调函数，但可以获取到最新的prop值和旧值
      console.log('Prop变化，新值为：', newValue, '旧值为：', oldValue)
    }
  }
}

在这个例子中，我们定义了一个名为name的prop，并在watch属性中使用了immediate: true。当父组件传递给子组件的name属性发生变化时，Vue会自动更新子组件的数据和视图。但是由于设置了immediate为true，watch的回调函数不会在初始化组件时被触发。只有当prop的值再次发生变化时，watch回调函数才会被触发，并且可以获取到最新的值和旧值。

通过使用immediate修饰符，我们可以灵活地控制watch的触发时机，使其不仅能够监听prop的变化，还可以在需要的时候进行相应的处理。

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` 触发时机的依赖。