v-for中的:key使用

最新推荐文章于 2024-03-27 20:09:56 发布

zoepriselife316

最新推荐文章于 2024-03-27 20:09:56 发布

阅读量254

点赞数

分类专栏： Demo vue 文章标签： vue

本文链接：https://blog.csdn.net/zoepriselife316/article/details/109100527

版权

Demo 同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

vue

41 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录切换和key属性的简单介绍</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <span v-if="isUser">
            <label for="username">
                用户账号
            </label>
            <input type="text" name="username" placeholder="请输入用户账号" id="username" key="username">
        </span>
        <span v-else>
            <label for="email">
                用户邮箱
            </label>
            <input type="text" name="email" id="email" placeholder="请输入用户邮箱" key="email">
        </span>
        <button @click="isUser = !isUser">点击切换</button>

        <hr>
        <p>
            组件的for属性 ：官方推荐我们使用v-for时，给对应的元素或组件添加一个key属性，正如，
            在上面的例子中给input添加不同的key,为了解决复用的问题。
        </p>
        <ul>
            <li v-for="item in letters" :key="item">{{item}}</li>
        </ul>
        <span>
            这个和虚拟dom的diff算法有关。有些人key绑定的是index，但这个index是会改变的，写成
            item，会一一对应。
        </span>
        <p>
            现在想在B和C之间插入个F，可以使用splice方法（开始的索引,删除的个数,替换的元素）
            splice(2,0,'F');可实现。内部是如何实现的？采用Diff算法，添加:key='item'来实现。具体内容见下方代码执行过程。
        </p>
        <button @click="addF">点击添加F</button>
    </div>

    <script>
        // 方法调用多次时，会执行多次
        // 但计算属性有缓存，计算属性相关的值若不发生改变，计算属性只会执行一次，如果修改值的话，也是只执行一次。
        const app = new Vue({
            el: '#app',
            data: {
                isUser: true,
                letters: ['A', 'B', 'C', 'D', 'E']
            },
            methods: {
                addF() {
                    this.letters.splice(2, 0, 'F')
                }
            }
        })
    </script>
</body>

</html>

执行过程：
下图中：左边是代码内容，中间的是虚拟dom，右边是浏览器。
数据渲染后，想在中间插入元素的渲染过程：
遍历出来的letter，会在虚拟dom中，创建这么多的li，后面的1，2,3等是便于理解的索引，想在B和C中间添加F，性能高点的做法是，使用的diff算法，一一对应，相同的会直接显示，不同的创建元素然后显示。
diff
但实际上，内部不是按性能高的方式，而是，想在B和C之间添加F，其实是把索引为3的值改为F，索引为4的改为C，索引为5的改为D、索引为6的添加一个E。而渲染到浏览器中，根据diff算法，也会看到从索引3开始都有变化，会重新渲染索引3开始的数据（F，C，D，E）
性能不高的做法
所以推荐添加key值。
放个截图：
有key和没key的对比
有了key值会将key与现有的内容进行对照，复用的时候，会进行对比。会按照高性能的方法去渲染，就是上图的方式，有key的，key为1的对应A，key为2的对应B，key为3的对应C，key为4的对应D，key为5的对应E，创建一个新的li，key值为6，对应的是F，然后将F放到对应的位置。达到性能的利用。写key也不是随意写的，要达到一一对应的效果，所以最好不用index，可以使用item，和渲染用的item相对应。

zoepriselife316

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-for中的:key使用

代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录切换和key属性的简单介绍</title> <script src="https://cdn.
复制链接

扫一扫

专栏目录