Vue中data遮蔽prop时，如何分别监听prop与data的变化？

当组件中同时存在同名的prop和data时，直接监听该名称会同时触发两者的变化。要分别监听它们，可以通过如下方式实现：

1. 仅监听prop的变化 #

通过监听$props对象下的对应属性来实现，$props是Vue实例中存储所有接收props的内置对象：

props: ['p'],
data() {
  return { p: 0 }
},
watch: {
  '$props.p'(newVal, oldVal) {
    // 此处仅响应prop的p值变化
    console.log('prop p变化：', newVal, oldVal)
  }
}

2. 仅监听data的变化 #

通过监听$data对象下的对应属性实现，$data是Vue实例中存储所有data属性的内置对象，注意需要用字符串形式指定路径：

props: ['p'],
data() {
  return { p: 0 }
},
watch: {
  '$data.p'(newVal, oldVal) {
    // 此处仅响应data的p值变化
    console.log('data p变化：', newVal, oldVal)
  }
}

注意事项 #

Vue官方不推荐让prop和data使用同名，这种写法会触发控制台警告，且容易导致逻辑混淆。更合理的做法是给prop和data设置不同的命名，比如将prop命名为pProp，data命名为pData，从根源上避免命名冲突。

内容的提问来源于stack exchange，提问作者KRISTIJAN TOMASINI