vue中使用v-for渲染数据为何需要加key?

主要记录：
一、有key和没key的差异
二、 key的作用
三、相关demo代码

一、有key和没key的差异

1、without key:

no key.gif

当选中青丘白浅时，input添加一个新值(比如离镜)后选中是“离镜”，并不是我们想要的结果，我们想要的是当添加“离镜”后，选中的是青丘白浅。

2、with key:

key.gif

加了key之后，相同操作，选中青丘白浅，添加“离镜”后依旧选中的是青丘白浅，是我们理想的效果。
（demo的相关代码在文末~）

3、原理:

在我们进行添加数据后，vue内部时通过Diff算法对虚拟DOM进行更新，从而进行页面数据更新渲染。
的。

（1）diff算法原理-BC之间插入一个F节点：

①diff算法原理-BC之间插入一个F节点.png

（2）Diff插入一个节点时默认操作：

②Diff插入一个节点时默认操作.png

Diff算法插入节点的默认操作如图②，并没有准确地追踪F节点，将其放在准确位置。

（3）Diff加key唯一标识：

为了能把F节点放在准确位置，我们给F节点添加一个key值来作为唯一标识。有了key，Diff算法就可以正确识别F节点并把它插入正确的位置。

③Diff加key后正确插入节点.png

了解Diff原理之后，前面with key青丘白浅的例子应该就更通俗易懂了。

二、key的作用

"为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性"--Vue官网

:key="唯一标识" ,唯一标识可以是item里面id index等,key的作用主要是为了高效的更新虚拟DOM。

可以这样理解：v-for加key是为了添加唯一标识，让Diff算法可以正确识别节点并把它插入正确的位置，提高Vue对虚拟DOM的更新效率。

三、相关demo代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>:key</title>
    <style>
        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <h3>没有:key</h3>
            <input type="text" v-model="name" v-on:keyup.enter="add">
            <button @click="add">添加</button>
            <ul>
                <li v-for="(item,i) in list">
                    <input type="checkbox">{{item.name}}
                </li>
            </ul>
            <p>解释：当选中青丘白浅时，input添加一个新值(比如离镜)后选中的确是“离镜”，并不是我们想要的结果，我们想要的是当添加“离镜”后，一种选中的是青丘白浅</p>
        </div>
        <hr>
        <div>
            <h3>有:key</h3>
            <input type="text" v-model="name" v-on:keyup.enter="add">
            <button @click="add">添加</button>
            <ul>
                <li v-for="(item,i) in list" :key="item.id">
                    <input type="checkbox">{{item.name}}
                </li>
            </ul>
            <p>解释：同样当选中青丘白浅时，添加“离镜”后依旧选中的是青丘白浅。</p>
            <p>:key="唯一标识" ,唯一标识可以是item里面id index等,key的作用主要是为了高效的更新虚拟DOM</p>
            <p>"为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性"--官网</p>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                name: '',
                newId: 3,
                list: [
                    { id: 1, name: '青丘白浅' },
                    { id: 2, name: '夜华' },
                    { id: 3, name: '墨渊' }
                ]
            },
            methods: {
                add: function () {
                    this.list.unshift({ id: ++this.newId, name: this.name })
                    this.name = ''
                }
            },
        })
    </script>
</body>

</html>

未完待续。。。

不定期更新笔记的日常~欢迎给♥

最后编辑于：2019.07.26 09:57:39