在VueJs 2.0文档中，我找不到任何可以监听道具变化的钩子。
VueJs有这样的钩子像onpropsupdate()或类似的吗?
更新
正如@wostex建议的那样，我试着观察我的财产，但没有任何变化。然后我意识到我遇到了一个特殊的情况:
<template>
<child :my-prop="myProp"></child>
</template>
<script>
export default {
props: ['myProp']
}
</script>
我将父组件接收到的myProp传递给子组件。然后手表:{myProp:…不起作用。
当前回答
如果myProp是一个对象，通常不可以更改。所以，手表永远不会被触发。为什么myProp不被改变的原因是你在大多数情况下只设置myProp的一些键。myProp本身仍然是一个。 试着看myProp的道具，比如“myProp”。A "应该有用。
其他回答
不确定你是否已经解决了这个问题(如果我理解正确的话)，但这是我的想法:
如果父节点接收myProp，并且你希望它传递给子节点并在子节点中观看它，那么父节点必须有myProp的副本(不是引用)。
试试这个:
new Vue({
el: '#app',
data: {
text: 'Hello'
},
components: {
'parent': {
props: ['myProp'],
computed: {
myInnerProp() { return myProp.clone(); } //eg. myProp.slice() for array
}
},
'child': {
props: ['myProp'],
watch: {
myProp(val, oldval) { now val will differ from oldval }
}
}
}
}
在html中:
<child :my-prop="myInnerProp"></child>
实际上，在这种情况下处理复杂的集合时，你必须非常小心(传递几次)
手表功能应该放在子组件中。没有父母。
如果你的道具myProp有嵌套项，这些嵌套项不会是反应性的，所以你需要使用像lodash deepClone这样的东西:
<child :myProp.sync="_.deepClone(myProp)"></child>
就这样，不需要监视或其他任何东西。
我使用道具和变量计算属性，如果我需要创建逻辑后接收更改
export default {
name: 'getObjectDetail',
filters: {},
components: {},
props: {
objectDetail: {
type: Object,
required: true
}
},
computed: {
_objectDetail: {
let value = false
...
if (someValidation)
...
}
}
默认情况下，组件中的道具是反应性的，您可以在组件中的道具上设置监视，这将帮助您根据需要修改功能。下面是一个简单的代码片段来展示它是如何工作的
setup(props) {
watch(
() => props.propName,
(oldValue, newValue) => {
//Here you can add you functionality
// as described in the name you will get old and new value of watched property
},
{ deep: true },
{ immediate: true } //if you need to run callback as soon as prop changes
)
}
希望这能帮助你得到你想要的结果。 祝你有愉快的一天。
