vue的key是什麼

青灯夜游原創: 2022-11-29 19:48:224417瀏覽

在vue中，key是DOM物件的標識，是給每一個vnode的唯一id，也是diff的最佳化策略；可以根據key，更準確、更快的找到對應的vnode節點。如果資料只做展示使用，可以使用index作為key；如果使用index作為key，而後續操作會破壞順序，一定會帶來效率問題，嚴重時會渲染出錯誤的DOM。

vue的key是什麼

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

1. key是什麼

key在Vue是DOM物件的識別；key是給每一個vnode的唯一id ，也是diff的最佳化策略，可以根據key，更準確，更快的找到對應的vnode節點。
進行清單展示時，預設key是index。
如果資料只做展示使用，使用index作為key是沒有任何問題的。
如果使用index作為key，而後續操作會破壞順序，一定會帶來效率問題，嚴重時會渲染出錯誤的DOM。【學習影片分享：vue影片教學、web前端影片】

#關於key的作用及實作原理，下面一一道來。

2. key的作用

key就是一個標識，被使用在Vue中。再詳細一點，key被使用在Vue中的虛擬DOM中，並不會出現在真實DOM中。

2.1 舉例

#以清單的形式展示一組人員資訊。

nbsp;html>


    <meta>
    <title>key的原理</title>

    <!--引入vue-->
    <script></script>
    

<div>
    <h2>人员列表</h2>
    <ul>
        <li>
            {{p.name}}-{{p.age}}
        </li>
    </ul>
</div>

    <script>
        const vm = new Vue({
            el:&#39;#root&#39;,
            data:{
                persons:[
                    {&#39;id&#39;:&#39;001&#39;, &#39;name&#39;:&#39;张三&#39;,&#39;age&#39;:&#39;18&#39;},
                    {&#39;id&#39;:&#39;002&#39;, &#39;name&#39;:&#39;李四&#39;,&#39;age&#39;:&#39;19&#39;},
                    {&#39;id&#39;:&#39;003&#39;, &#39;name&#39;:&#39;王五&#39;,&#39;age&#39;:&#39;20&#39;}
                ]
            }
        })
    </script>

這個html檔案在瀏覽器中開啟如下圖所示。

vue的key是什麼

而上述範例html檔案中並沒有使用到key，似乎也沒有問題。當然，單純地展示數據，不寫key是不會有問題的。【學習影片分享：vue影片教學、web前端影片】

#現在我們為上述範例加上key，這裡以每個資料的id為key

{{p.name}}-{{p.age}}

加上key的展示結果和上圖結果一模一樣。

vue的key是什麼

而如果我們在瀏覽器上查看元素，就不會看到key的存在。

vue的key是什麼

截至目前，我們可以得到兩個結論：1. 只做資料展示用，不寫key是沒有任何影響的；2.key不會出現在真實DOM中

實際上，即使不寫key，Vue在生成真實DOM時，也用到了key，預設是資料索引（index）

我們把key替換為index，展示的資料不會產生任何改變。

{{p.name}}-{{p.age}}

2.2 修改上述範例

在展示人員資訊的基礎上顯示索引，並且新增一個按鈕，功能是在頭部添加人員資訊

對上述html檔案稍加修改。

nbsp;html>


    <meta>
    <title>key的原理</title>

    <!--引入vue-->
    <script></script>
    <link>


<div>
    <h2>人员列表</h2>
    <button>添加一个老刘</button>
    <ul>
        <li>
            {{p.name}}-{{p.age}}-{{index}}
        </li>
    </ul>
</div>

    <script>
        const vm = new Vue({
            el:&#39;#root&#39;,
            data:{
                persons:[
                    {&#39;id&#39;:&#39;001&#39;, &#39;name&#39;:&#39;张三&#39;,&#39;age&#39;:&#39;18&#39;},
                    {&#39;id&#39;:&#39;002&#39;, &#39;name&#39;:&#39;李四&#39;,&#39;age&#39;:&#39;19&#39;},
                    {&#39;id&#39;:&#39;003&#39;, &#39;name&#39;:&#39;王五&#39;,&#39;age&#39;:&#39;20&#39;}
                ]
            },
            methods:{
                add(){
                    const p = {&#39;id&#39;:&#39;004&#39;, &#39;name&#39;:&#39;老刘&#39;,&#39;age&#39;:&#39;40&#39;}
                    this.persons.unshift(p)
                }
            }
        })
    </script>

我們可以看到，張三、李四、王五的索引分為別0，1，2

vue的key是什麼

點擊按鈕，新增一個新人物，這個時候索引發生了變化，新加入的人物「老劉」變成了索引0，似乎對，也似乎不對

vue的key是什麼

##當然，單純地討論索引，這裡一點問題也沒有，下面舉一個新例子，來說說「不對「在哪裡

2.3 再修改一下範例

不展示索引了，改為輸入框，在每個人物後面的輸入框內寫上人物的姓，觀察新插入資料後原始資料的變化

稍微修改一下html vue的key是什麼

{{p.name}}-{{p.age}}

實際效果就是下圖這樣

到這裡，似乎沒有什麼不對，

接下來就是見證奇蹟的時刻

vue的key是什麼

加入老劉，出現了問題，和我們預想的不一樣。 ############

这是key为index的情况，如果修改为数据的唯一标识，则不会产生这样的问题。

{{p.name}}-{{p.age}}

诶，这就是我们想要的。

vue的key是什麼
列表内有输入内容，后续操作破坏了原始顺序，如果以index作为key，就会产生错误DOM

3. key的实现原理

要解释key的实现原理，就要引入Vue一个十分重要的概念——【虚拟DOM】。

给出一组数据，Vue要把这些数据渲染到页面上，首先要生成【虚拟DOM】，然后根据【虚拟DOM】去生成【真实的DOM】。如果数据发生了改变，Vue会生成【新的虚拟DOM】，注意，这个【新的虚拟DOM】并不会直接生成【新的真实DOM】，否则虚拟DOM一点用处也没有了。Vue的操作是，拿根据新的数据生成的【新的虚拟DOM】与之前的【真实的DOM】去做比较，如果相同，直接延用即可（“拿来主义”）；如果不同，则生成新的DOM对象。

在这个过程中key扮演了很重要的角色。

根据最后一个示例进行剖析。