在VueJs 2.0文档中，我找不到任何可以监听道具变化的钩子。
VueJs有这样的钩子像onpropsupdate()或类似的吗?
更新
正如@wostex建议的那样，我试着观察我的财产，但没有任何变化。然后我意识到我遇到了一个特殊的情况:
<template>
<child :my-prop="myProp"></child>
</template>
<script>
export default {
props: ['myProp']
}
</script>
我将父组件接收到的myProp传递给子组件。然后手表:{myProp:…不起作用。
当前回答
我使用道具和变量计算属性，如果我需要创建逻辑后接收更改
export default {
name: 'getObjectDetail',
filters: {},
components: {},
props: {
objectDetail: {
type: Object,
required: true
}
},
computed: {
_objectDetail: {
let value = false
...
if (someValidation)
...
}
}
其他回答
在我的情况下，我需要一个解决方案，任何时候任何道具都会改变，我需要再次解析我的数据。我厌倦了为我所有的道具制作分离的观察者，所以我用了这个:
watch: {
$props: {
handler() {
this.parseData();
},
deep: true,
immediate: true,
},
},
从这个例子中得到的关键点是使用deep: true，这样它不仅监视$props，而且还监视它的嵌套值，例如props. myprop
你可以在这里了解更多关于这款扩展手表的选择:https://v2.vuejs.org/v2/api/#vm-watch
如果你的道具myProp有嵌套项，这些嵌套项不会是反应性的，所以你需要使用像lodash deepClone这样的东西:
<child :myProp.sync="_.deepClone(myProp)"></child>
就这样，不需要监视或其他任何东西。
对于双向绑定，你必须使用.sync修饰符
<child :myprop.sync="text"></child>
更多细节…
你必须在子组件中使用watch属性来监听和更新任何更改
props: ['myprop'],
watch: {
myprop: function(newVal, oldVal) { // watch it
console.log('Prop changed: ', newVal, ' | was: ', oldVal)
}
}
你可以使用观察模式来检测变化:
在原子级别上做所有事情。首先检查watch方法本身是否被调用通过安慰内部的东西。一旦确定要调用手表，就用您的业务逻辑将其粉碎。
watch: {
myProp: function() {
console.log('Prop changed')
}
}
我使用计算属性，如:
items:{
get(){
return this.resources;
},
set(v){
this.$emit("update:resources", v)
}
},
在这种情况下，Resources是一个属性:
props: [ 'resources' ]
