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

Vue2.0 中使用 watch 观察 prop 变化不触发的原因是，默认情况下，Vue 不允许直接修改 prop，因此当 prop 被父组件更新时，不会触发子组件中的 watch 监听器。

为了正确地在子组件中观察 prop 的变化，你可以采取以下几种方法：

使用计算属性：
- 虽然不能直接监听 prop 的变化，但你可以使用计算属性来基于 prop 值进行计算或处理，这样当 prop 变化时，计算属性会重新计算。
在父组件中监听变化，并通过事件通知子组件：
- 在父组件中监听 prop 的变化，当变化发生时，通过自定义事件将变化通知给子组件。子组件可以监听这个事件并作出响应。
使用 .sync 修饰符或 vmodel：
- 对于某些特定的场景，如需要父子组件间双向绑定数据，可以使用 .sync 修饰符或 vmodel。但请注意，这通常用于表单输入等场景，并不适用于所有情况。
在子组件中定义一个本地数据属性，并在 watch 中监听 prop，然后同步更新本地数据：
- 这是一种变通方法，你可以在子组件中定义一个与 prop 同名的本地数据属性，并在 watch 中监听 prop 的变化。当 prop 变化时，更新本地数据属性。虽然这种方法可以触发监听器，但需要注意的是，你应该避免直接修改 prop，而是应该通过事件通知父组件来更新 prop 的值。

重点内容：在 Vue2.0 中，由于 prop 是单向数据流的一部分，直接修改 prop 是不被推荐的。因此，当 prop 变化时，Vue 默认不会触发子组件中的 watch 监听器。为了处理这种情况，你可以考虑使用上述提到的方法之一。

热门标签