在VueJs 2.0文档中，我找不到任何可以监听道具变化的钩子。
VueJs有这样的钩子像onpropsupdate()或类似的吗?
更新
正如@wostex建议的那样，我试着观察我的财产，但没有任何变化。然后我意识到我遇到了一个特殊的情况:
<template>
<child :my-prop="myProp"></child>
</template>
<script>
export default {
props: ['myProp']
}
</script>
我将父组件接收到的myProp传递给子组件。然后手表:{myProp:…不起作用。
当前回答
默认情况下，组件中的道具是反应性的，您可以在组件中的道具上设置监视，这将帮助您根据需要修改功能。下面是一个简单的代码片段来展示它是如何工作的
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
)
}
希望这能帮助你得到你想要的结果。 祝你有愉快的一天。
其他回答
不确定你是否已经解决了这个问题(如果我理解正确的话)，但这是我的想法:
如果父节点接收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>
实际上，在这种情况下处理复杂的集合时，你必须非常小心(传递几次)
在我的情况下，我需要一个解决方案，任何时候任何道具都会改变，我需要再次解析我的数据。我厌倦了为我所有的道具制作分离的观察者，所以我用了这个:
watch: {
$props: {
handler() {
this.parseData();
},
deep: true,
immediate: true,
},
},
从这个例子中得到的关键点是使用deep: true，这样它不仅监视$props，而且还监视它的嵌套值，例如props. myprop
你可以在这里了解更多关于这款扩展手表的选择:https://v2.vuejs.org/v2/api/#vm-watch
你试过这个吗?
watch: {
myProp: {
// the callback will be called immediately after the start of the observation
immediate: true,
handler (val, oldVal) {
// do your stuff
}
}
}
https://v2.vuejs.org/v2/api/#watch
如果myProp是一个对象，通常不可以更改。所以，手表永远不会被触发。为什么myProp不被改变的原因是你在大多数情况下只设置myProp的一些键。myProp本身仍然是一个。 试着看myProp的道具，比如“myProp”。A "应该有用。
默认情况下，组件中的道具是反应性的，您可以在组件中的道具上设置监视，这将帮助您根据需要修改功能。下面是一个简单的代码片段来展示它是如何工作的
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
)
}
希望这能帮助你得到你想要的结果。 祝你有愉快的一天。
