集帅(美)们，别再写 :key = “index“ 啦！

原创于 2024-02-26 18:18:07 发布 · 334 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #开发语言 #代码规范 #程序员创富

前端同时被 2 个专栏收录

2 篇文章

订阅专栏

编程

2 篇文章

订阅专栏

本文介绍了在Vue中使用`v-for`时，应避免使用`key=index`作为唯一标识符，因为这会导致在数据变动时虚拟DOM的不稳定，影响性能。作者解释了虚拟DOM的工作原理、diff算法以及为什么随机数作key也不可行。

浅聊一下

灵魂拷问：你有没有在v-for里使用过:key = "index"，如果有，我希望你马上改正过来并且给我点个赞，如果没有，来都来了，顺手给我点个赞...

开始

在向掘友们解释为什么不能使用 :key = "index" 之前，我想我还得向你们铺垫一点东西

虚拟DOM

什么是虚拟DOM呢？虚拟DOM是一个对象，没想到吧...我们来看看Vue是如何将template模板里面的东西交给浏览器来渲染的

首先通过 compiler 将 template模板变成一个虚拟DOM，再将虚拟DOM转换成HTML，最后再交给浏览器V8引擎渲染，那么虚拟DOM是什么样的呢？

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
       <ul id="item">
           <li v-for="item in list" class="item">{{item}}</li>
       </ul>
    </div>
    <script>
        const { createApp, ref } = Vue
        createApp({
            setup() {
               const list = ref(['vue','js','html'])
               return {
                    list
                }
            }
        }).mount('#app')
    </script>
</body>

</html>

在这里，template模板实际上是

 <ul>
      <li v-for="item in list">{{item}}</li>
 </ul>

通过v-for循环，渲染出来了3个li

<ul>
    <li>vue<li>
    <li>js<li>
    <li>html<li>
</ul>

我们的compiler会将这个模板转化成虚拟DOM

let oldDom = {
    tagName = 'ul',
    props:{
        //存放id 和 class 等
        id:'item'
    },
    children[
        {
            tagName = 'li',
            props:{
                class:'item'
            },
            children:['vue']
        },
                {
            tagName = 'li',
            props:{
                class:'item'
            },
            children:['js']
        },
                {
            tagName = 'li',
            props:{
                class:'item'
            },
            children:['html']
        },
    ]
}

diff算法

给前面的例子来点刺激的，加上一个按钮和反转函数，点击按钮，list反转

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
       <ul>
           <li v-for="item in list">{{item}}</li>
       </ul>
       <button @click="change">change</button>
    </div>
    <script>
        const { createApp, ref } = Vue
        createApp({
            setup() {
               const list = ref(['唱','跳','rap','篮球'])
               const change = ()=>{
                list.value.reverse()
               }
               const add = ()=>{
                list.value.unshift('6')
               }
               return {
                    list,
                    change,
                }
            }
        }).mount('#app')
    </script>
</body>

</html>

点击change按钮，此时我们的DOM更改vue又是如何来更新DOM的呢？