博客主要讲述在Vue中，计算属性依赖props的data数据，data更新后计算属性未实时获取新数据，watch监听也不执行。经排查发现，父组件设置obj值需用set或splice等方法，否则子组件监听不到数据变化。
在计算属性中依赖于props的data数据，当data更新后，computed并没有实时去拿data数据。(本来想通过watch data的改变去实现，但是watch一直不执行，但data数据本身确实改变了，很诡异...)
代码如下：
props: {
data: {
default: () => {},
type: Object,
},
},
data() {
return {
};
},
created() {
},
computed: {
...mapState({
}),
handleTotalPrice() {
return this.fixNumber(this.totalPrice);
},
handledData() {
const handledData = JSON.parse(JSON.stringify(this.data)); // 这里
Object.entries(handledData).forEach(([key, value]) => {
if (value.price) {
handledData[key].price = this.fixNumber(value.price);
}
if (value.list) {
...
}
});
return handledData;
},
},
watch: {
// 以下两种写法都无效
data(newV, oldV) {
console.log('submit watch');
},
data: {
handler(newV, oldV) {
console.log('submit watch');
},
deep: true,
},
},
已经定位到问题了。在父组件设置obj的值需要通过set或者splice等方法，要不然，子组件监听不到。
之前以为只是本组件内需要通过set，万万没想到。。。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
