H5W3
当前位置:H5W3 > 问答 > 正文

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

开发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。

本文地址:H5W3 » VUE的v-for中深入响应式原理的问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址