VUE的v-for中深入响应式原理的问题

  • H5W3
  • 2021-02-09 11:07:52

开发Vue的一个组件遇到下面的问题:

<div v-for="item in items" :key="item.id">
<div>{{ item.content.name }}</div>
<img v-if="https://q.cnblogs.com/q/130385/item.content.src" :src="https://q.cnblogs.com/q/130385/item.content.src" alt="loading" />
<!--目前这个src还不知道 -->
</div>

在该组件的script中:

export default {
watch:{
items: function(new_val){
console.log( new_val )  ;
}
},
computed:{
items() {
return this.$store.state.items
}
}
}

上面的组件用到了vuex中的items, 这个items的值会进行异步修改. 也就是说, 首次渲染的时候img没有src属性, 图片不会加载; 随后当异步消息到达vuex并修改v-for的遍历对象items后, 我想让这个已经被render的对象更新src, 进而显示图片.

可是看了官方文档[https://cn.vuejs.org/v2/guide/reactivity.html#对于数组], 试了试对items修改时, 使用splice(index, 1, new_val)方法, 结果可以让上面的组件watch到items中src的变化, 但是!!!⚠️ , 真正的问题是v-for渲染不到items的变化, 真实的DOM中src并没有改变, 这就很让人头疼, 不知道哪位大神可以解答一下, 感谢🙏

回答

watch: {

obj: {

handler(newName, oldName) {

console.log('obj.a changed');

},

immediate: true,

deep: true

}

}

deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

以上是 VUE的v-for中深入响应式原理的问题 的全部内容， 来源链接： www.h5w3.com/114398.html

回到顶部