在VueJs 2.0文档中，我找不到任何可以监听道具变化的钩子。
VueJs有这样的钩子像onpropsupdate()或类似的吗?
更新
正如@wostex建议的那样，我试着观察我的财产，但没有任何变化。然后我意识到我遇到了一个特殊的情况:
<template>
<child :my-prop="myProp"></child>
</template>
<script>
export default {
props: ['myProp']
}
</script>
我将父组件接收到的myProp传递给子组件。然后手表:{myProp:…不起作用。
当前回答
@JoeSchr有答案。如果你不想要深度，还有另一种方法:true
mounted() {
this.yourMethod();
// re-render any time a prop changes
Object.keys(this.$options.props).forEach(key => {
this.$watch(key, this.yourMethod);
});
},
其他回答
@JoeSchr有答案。如果你不想要深度，还有另一种方法:true
mounted() {
this.yourMethod();
// re-render any time a prop changes
Object.keys(this.$options.props).forEach(key => {
this.$watch(key, this.yourMethod);
});
},
我认为在大多数情况下，Vue会在道具变化时更新组件的DOM。
如果这是你的情况，那么你可以使用beforeUpdate()或updated()钩子(docs)来观察道具。
如果你只对新val感兴趣而不需要旧val，你可以这样做
new Vue({ el: '#app', data: { text: '' }, components: { 'child': { template: `<p>{{ myprop }}</p>`, props: ['myprop'], beforeUpdate() { console.log(this.myprop) }, updated() { console.log(this.myprop) } } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <child :myprop="text"></child> <input v-model="text" placeholder="Type here to view prop changes" style="width:20em"> </div>
对我来说，这是一个礼貌的解决方案，让一个特定的道具发生变化，并用它创建逻辑
我将使用道具和变量计算属性来创建接收更改后的逻辑
export default {
name: 'getObjectDetail',
filters: {},
components: {},
props: {
objectDetail: { // <--- we could access to this value with this.objectDetail
type: Object,
required: true
}
},
computed: {
_objectDetail: {
let value = false
// ...
// if || do || while -- whatever logic
// insert validation logic with this.objectDetail (prop value)
value = true
// ...
return value
}
}
因此，我们可以在html渲染中使用_objectDetail
<span>
{{ _objectDetail }}
</span>
或以某种方式:
literallySomeMethod: function() {
if (this._objectDetail) {
....
}
}
你可以使用观察模式来检测变化:
在原子级别上做所有事情。首先检查watch方法本身是否被调用通过安慰内部的东西。一旦确定要调用手表，就用您的业务逻辑将其粉碎。
watch: {
myProp: function() {
console.log('Prop changed')
}
}
我使用计算属性，如:
items:{
get(){
return this.resources;
},
set(v){
this.$emit("update:resources", v)
}
},
在这种情况下，Resources是一个属性:
props: [ 'resources' ]
