循环渲染 | iGmaBlog

语法

Vue 循环指令

在 Vue 中通过 v-for 指令渲染列表。
渲染列表的前提是必须有一组数据，数据的数据类型可以是数组、对象、字符串。通常情况下是数组。
部分数据需要调用接口获取，若没有接口可直接定义一个数组，存放一些死数据。

v-for 用法

语法格式：v-for="item in list"
item 表示循环变量，list 是循环的数据列表。

代码实现

html

<body>
    <div id="root">
        <ul>
            <li v-for="(item, index) in stydent" :key="item.id">
                <p>姓名：{{ item.name }}，年龄：{{ item.age }}</p>
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
              stydent: [
                { id: '001',name: '张三',age: 20 },
                { id: '002',name: '李四',age: 21 },
                { id: '003',name: '王五',age: 22 },
              ]  
            },
        })
    </script>
</body>

运行结果

Key 的作用

虚拟 DOM 中 key 的作用

key 是虚拟 DOM 的表示，当数据发生变化时，Vue 会根据新数据生成新的虚拟 DOM，随后 Vue 进行新虚拟 DOM 与旧虚拟 DOM 的差异比较。

比较规则

旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key：
1. 若虚拟 DOM 中内容没变，直接使用之前的真是 DOM
2. 若虚拟 DOM 中内容变了，则生成新的真是 DOM ，随后替换掉页面中之前的真是 DOM
旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key：
创建新的真是 DOM，随后渲染到页面。

用 index 作为 key 可能会引发的问题

若对数据进行逆序添加、逆序删除等破坏顺序的操作时，会产生没有必要的真是 DOM。界面效果没问题，但效率低。
如果结构中还包含输入类的 DOM：会产生错误的 DOM。

开发中如何选择 key

最好使用每条数据的唯一表示最为 key ，比如id、手机号、身份证号、学号等主键。
如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用 index 作为 key 是没有问题的。

Vue.set API

功能

给对象追加一个属性。使用 Vue.set 这个 API 给对象添加的属性时，添加属性的同时会自动添加一个 get() 和 set() 方法。

代码实现

代码

html

<body>
    <div id="root">
        <h2>昵称：{{ student.name }}</h2>
        <h2>年龄：{{ student.age }}</h2>
        <h2>性别：{{ student.sex }}</h2>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                student: {
                    name: 'iGma',
                    age: 21,
                }
            }
        })
    </script>
</body>

注意，在第三个 h2 标签中，渲染了学生的性别，在 data.student 中却没有性别这个属性。此时控制台并不会报错，原因是在 h2 标签中渲染 student.sex 数据，因为 student 是存在的，而 student.sex 不存在，相当于 undefined ，Vue 在渲染数据时，不会渲染 undefined，也不会报错。
运行结果
这时在控制台通过 Vue.set API 给 student 添加一个 sex 属性。Vue.set API 需要传递三个参数：
- 参数1：要追加的目标对象，也就是 student
- 参数2：属性名 key。sex
- 参数3：属性值 val。男
- 运行结果
Vue.set API 的局限性：这个 API 只能给 data 中某个对象追加一个属性，而不能在 data 上追加。

Vue 检测数组

概要

当数组中的值通过下标改变时，Vue 不会重新渲染视图。原因是通过下标改变值时，Vue 并不认为数组发生了变化，只有调用数组的 push、pop、shift、unshift、splice、sort、reverse 这 7 个数组方法时，Vue 会认为数组发生了变化。
通过 Vue.set 方法也可以改变数组内的值，参数分别是数组对象、索引和值，这个不常用。

代码实现

代码

html

<body>
    <div id="root">
        <h2>于老师三大爱好</h2>
        <ul>
            <li v-for="(item, index) in hobby" :key="index">{{ item }}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                hobby: ['抽烟','喝酒','烫头']
            },
        })
    </script>
</body>

运行结果
- 通过下标改变数组值

通过 splice 方法改变值
通过 Vue.set API 改变值

总结

vue 会监视 data 中所有层次的数据。
如何检测对象中的数据？
- 通过 setter 实现监视，且要在 new Vue 时就传入要检测的数据。
- 对象中后追加的属性，Vue默认不做响应式处理
- 如需给后添加的属性做响应式，可以使用 Vue.set 这个 API
如何检测数组中的数据？
- 通过包裹数组更新元素的方法实现，本质就是做了两件事。
- 调用原生对应的方法对数组进行更新。
- 重新解析模板，进而更新页面。
在 Vue 修改数组中的某个元素一定要用下面的方法
- push()、pop()、shift()、unshift()、splice()、sort()、reverse()
- Vue.set 或 vm.$set()

语法 ​

Vue 循环指令 ​

v-for 用法 ​

Key 的作用 ​

虚拟 DOM 中 key 的作用 ​

比较规则 ​

用 index 作为 key 可能会引发的问题 ​

开发中如何选择 key ​

Vue.set API ​

功能 ​

代码实现 ​

Vue 检测数组 ​

概要 ​

代码实现 ​

总结 ​

语法

Vue 循环指令

v-for 用法

Key 的作用

虚拟 DOM 中 key 的作用

比较规则

用 index 作为 key 可能会引发的问题

开发中如何选择 key

Vue.set API

功能

代码实现

Vue 检测数组

概要

代码实现

总结