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

Question

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

<div v-for="item in items" :key="item.id">
    <div>{{ item.content.name }}</div>
    <img v-if="item.content.src" :src="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并没有改变, 这就很让人头疼, 不知道哪位大神可以解答一下, 感谢

标签： vue vuex 深入响应式原理 javascript html

举报

Answer 1

可以试下，items.push

Answer 2

watch: {
obj: {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true,
deep: true
}
}
deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

Answer 3

如果是渲染出来看不到的话，就在样式表中加上line-height这一句，设置下行高就好了，如果不是的话就不知道了，也是刚入门

Answer 4

items打印出来看看是不是为空了，还有首次渲染应该设置一个默认图片的。。。

Answer 5

https://cn.vuejs.org/v2/guide/list.html#在组件上使用-v-for

官方现成的例子, 看仔细一些.

然后你的这个问题的具体例子, 请参考:
https://blog.csdn.net/grepets/article/details/82145946
https://www.cnblogs.com/xiaolucky/p/12630739.html

Answer 6

vm.$set 试试用这个来更新。 新加的属性，
2：或者默认加上src 属性 值为空。异步的时候在来修改 提前申明属性