v-for的用法及key值原理

陌一一

已于 2022-11-21 09:20:27 修改

阅读量2.6k

点赞数

分类专栏： web前端开发文章标签：数据结构 vue.js 前端框架 javascript 前端

于 2022-11-20 21:53:54 首次发布

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127953031

版权

web前端开发专栏收录该内容

281 篇文章 16 订阅

订阅专栏

v-for的用途：

（1）关键字：

v-for遍历的时候，关键字有两个：
in、of：两个关键字没有区别，用哪一个都行；

（2）支持对象、数组、数字遍历：

v-for支持对象遍历，但是没太大的意义；
v-for支持数组遍历；
v-for支持数字遍历：

<body>
    <div id="box">
        <ul>
            <li v-for="item in 10">
                {{item}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#box",
        })
    </script>
</body>

结果：

遍历的结果从1开始到10结束，包括10；

（3）key值原理（重点中的重点）

那li标签数组遍历来讲：

代码：

<body>
    <div id="box">
        <ul>
            <li v-for="item in mylist">
                {{item}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                mylist:["111","222","333"]
            }
        })
    </script>
</body>

结果：

看上面的代码li标签遍历以后，如果我们删除了“222”这个元素，删除以后这个数组["111","333"]是从新让li标签遍历呢，还是说有什么一套原理，这个Vue刚好知道是“222”元素删除了，其他的保留不遍历了，只删除这个“222”元素，原理是如何的，往下面看：

其实原理并不是把新的数组再去遍历，而是重用和从新排序现有的元素，也就是让Vue知道是“222”元素删除了，可是Vue并没有这么智能，需要我们给li标签增加key值来标记唯一的元素来实现Vue知道是“222”删除的事实。

底层原理图：

语言描述呢就是：原数组创建一个虚拟节点，虚拟节点里面放着js对象描述的节点，里面放着简略版的重要的属性信息，然后虚拟dom再创建真实的dom显示显示在页面上。当你更新了要遍历的数组，这个数组并不是重新去遍历，而是新的数组也会创建一个虚拟的dom，然后这个新的虚拟的dom会跟原来的虚拟dom进行对比，查出来不同的点再去进行相应的更新，创建最终的dom。那这个相应的更新是怎么一个原理呢：新的虚拟dom和旧的虚拟dom对比的时候，如果想要进行旧的节点复用和重新排序是需要给每一个数组元素增加一个“唯一标识这个数组内容的key值”，比如说“111”文本唯一的标识可以是id=1，“222”为id=2，“333”为id=3，这样在新数组删除“222”的时候，“111”和“333”唯一的标识还是id=1和id=3，然后Vue在进行虚拟dom对比时，就会让新旧的id=1的“111”进行对比，没有改变就复用内容，对比id=2的“222”时，发现新的虚拟dom中没有id=2的值，那Vue就标记id=2的值被删除了，然后再对比id=3的值，发现id=3的新旧虚拟dom也是一样的，然后也会复用，所以Vue就是根据每个数组内容都有唯一标识的key来进行智能的判断是哪个位置上的哪个内容有了什么变化（删除，修改等），进而通过“重用和重新排序现有元素”来实现元素更新，最终遍历生成最终真实dom。

有几点需要说明：

虚拟dom中放着图中“js对象描述的节点”，里面是几个关键的属性，关键的属性进行对比就行了；
为什么不直接创建真实dom呢，因为真实的dom对象有很多的属性，加载慢，很麻烦，而创建虚拟的dom对象，里面属性只放了几个关键的属性，所以要创建虚拟dom，以最小的代价更新节点，代价很低，一定要有虚拟dom；

key值的作用：