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

2021-02-09 18:24发布

问题:

开发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并没有改变, 这就很让人头疼, 不知道哪位大神可以解答一下, 感谢