Vue 渲染DOM的问题

Question

先贴代码为敬：

• 错误的示范：

<template>
    <div class="account_binding">
        <div class="crumb_box">
            <h2>素材库</h2>
        </div>
        <ul>
            <li v-for="(item,i) in materialList.item" :key="item.media_id">
                <a v-for="(itemsub,x) in item.content.news_item">
                    {{itemsub.title}}
                </a>
            </li>
        </ul>

    </div>
</template>

<script>
    export default {
        name: 'materialList',
        props: {},
        data() {
            return {
                materialList: {},
            }
        },
        mounted: function () {
            this.getMaterialList();
        },
        methods: {
            getMaterialList(){
                let that=this;
                setTimeout(() => {
                    that.materialList = {
                        item: [
                            {
                            media_id: "sdffdsd",
                            content: {
                                news_item: [
                                {
                                    title: "测试图文素材1",
                                    thumb_media_id: "sfsdfsdsdf",
                                    show_cover_pic: 1,
                                    author: "作者",
                                    digest: "摘要",
                                    content: "文本内容",
                                    url: "http://www.cityre.cn",
                                    content_source_url: "http://www.cityre.cn",
                                },
                                {
                                    title: "测试图文素材2",
                                    thumb_media_id: "sfsdfsdsdf",
                                    show_cover_pic: 1,
                                    author: "作者",
                                    digest: "摘要",
                                    content: "文本内容",
                                    url: "http://www.cityre.cn",
                                    content_source_url: "http://www.cityre.cn",
                                },
                                {
                                    title: "测试图文素材3",
                                    thumb_media_id: "sfsdfsdsdf",
                                    show_cover_pic: 1,
                                    author: "作者",
                                    digest: "摘要",
                                    content: "文本内容",
                                    url: "http://www.cityre.cn",
                                    content_source_url: "http://www.cityre.cn",
                                },
                                ],
                            },
                            update_time: "2020-10-10",
                            },
                        ],
                    };
                });
            }
        },
    }
</script>

• 正确的示范：

<template>
    <div class="account_binding">
        <div class="crumb_box">
            <h2>素材库</h2>
        </div>
        <ul v-if="materialList.item">
            <li v-for="(item,i) in materialList.item" :key="item.media_id">
                <a v-for="(itemsub,x) in item.content.news_item">
                    {{itemsub.title}}
                </a>
            </li>
        </ul>

    </div>
</template>

<script>
    export default {
        name: 'materialList',
        props: {},
        data() {
            return {
                materialList: {},
            }
        },
        mounted: function () {
            this.getMaterialList();
        },
        methods: {
            getMaterialList(){
                let that=this;
                setTimeout(() => {
                    that.materialList = {
                        item: [
                            {
                            media_id: "sdffdsd",
                            content: {
                                news_item: [
                                {
                                    title: "测试图文素材1",
                                    thumb_media_id: "sfsdfsdsdf",
                                    show_cover_pic: 1,
                                    author: "作者",
                                    digest: "摘要",
                                    content: "文本内容",
                                    url: "http://www.cityre.cn",
                                    content_source_url: "http://www.cityre.cn",
                                },
                                {
                                    title: "测试图文素材2",
                                    thumb_media_id: "sfsdfsdsdf",
                                    show_cover_pic: 1,
                                    author: "作者",
                                    digest: "摘要",
                                    content: "文本内容",
                                    url: "http://www.cityre.cn",
                                    content_source_url: "http://www.cityre.cn",
                                },
                                {
                                    title: "测试图文素材3",
                                    thumb_media_id: "sfsdfsdsdf",
                                    show_cover_pic: 1,
                                    author: "作者",
                                    digest: "摘要",
                                    content: "文本内容",
                                    url: "http://www.cityre.cn",
                                    content_source_url: "http://www.cityre.cn",
                                },
                                ],
                            },
                            update_time: "2020-10-10",
                            },
                        ],
                    };
                });
            }
        },
    }
</script>

环境是 cdn 引入的 vue2.5.2， 现在遇到的问题是：

ul 元素那里， 如果不加 v-if="materialList.item"， 数据更新后（vue开发工具可以看到数据更新了）
并不会更新dom， 请教这是啥原因导致的？

---

已解决：

原因是 v-if 会触发生命周期的更新。 即：

初始值为 false 组件不会渲染，生命周期钩子不会执行，v-if 的渲染是惰性的。
false => true 依次执行 beforeCreate,created,beforeMount,mounted 钩子。
true => false 依次执行 beforeDestroy,destroyed 钩子。

Answer 1

初始的data

 data() {
            return {
                materialList: {},
            }
        },

materialList没有item属性，没有if判断直接for你确定控制台没报错？

Answer 2

建议遍历数据时都加上一个key

<li v-for="(item,i) in materialList.item" :key="item.id" >

1、如果你是想修改数组内的其中一项数据可以使用

materialList.item.splice(indexOfItem, 1, newElement)

2、如果你想更新数组建议使用

materialList.item = [...Array]

3、你可以尝试

 data() {
            return {
                materialList: {
                    item:[]
                },
            }
 },