vue的key是什麼 - tw511教學網

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

前端（vue）入門到精通課程，老師線上輔導：聯絡老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

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

1. key是什麼

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

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

2. key的作用

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

2.1 舉一個例子

以列表的形式展示一組人員資訊。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>key的原理</title>

    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    
</head>
<div id="root">
    <h2>人員列表</h2>
    <ul>
        <li v-for="(p,index) in persons">
            {{p.name}}-{{p.age}}
        </li>
    </ul>
</div>
<body>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#root',
            data:{
                persons:[
                    {'id':'001', 'name':'張三','age':'18'},
                    {'id':'002', 'name':'李四','age':'19'},
                    {'id':'003', 'name':'王五','age':'20'}
                ]
            }
        })
    </script>
</body>
</html>
登入後複製

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

而上述範例html檔案中並沒有使用到key，似乎也沒有問題。當然，單純地展示資料，不寫key是不會存在問題的。【學習視訊分享：、】

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

<li v-for="(p,index) in persons" :key="p.id">
    {{p.name}}-{{p.age}}
</li>
登入後複製

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

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

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

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

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

<li v-for="(p,index) in persons" :key="index">
	{{p.name}}-{{p.age}}
</li>
登入後複製

2.2 修改一下上述範例

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

對上述html檔案稍加修改。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>key的原理</title>

    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <link rel="icon" href="../favicon.ico" type="image/x-icon" />

</head>
<div id="root">
    <h2>人員列表</h2>
    <button @click="add">新增一個老劉</button>
    <ul>
        <li v-for="(p,index) in persons" :key="index">
            {{p.name}}-{{p.age}}-{{index}}
        </li>
    </ul>
</div>
<body>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#root',
            data:{
                persons:[
                    {'id':'001', 'name':'張三','age':'18'},
                    {'id':'002', 'name':'李四','age':'19'},
                    {'id':'003', 'name':'王五','age':'20'}
                ]
            },
            methods:{
                add(){
                    const p = {'id':'004', 'name':'老劉','age':'40'}
                    this.persons.unshift(p)
                }
            }
        })
    </script>
</body>
</html>
登入後複製

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

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

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

2.3 再修改一下範例

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

稍微修改一下html

<li v-for="(p,index) in persons" :key="index">
    {{p.name}}-{{p.age}}
    <input type="text">
</li>
登入後複製

實際效果就是下圖這樣

到這裡，似乎沒有什麼不對，接下來就是見證奇蹟的時刻

新增老劉，出現了問題，和我們預想的不一樣。

這是key為index的情況，如果修改為資料的唯一標識，則不會產生這樣的問題。

<li v-for="(p,index) in persons" :key="p.id">
    {{p.name}}-{{p.age}}
    <input type="text">
</li>
登入後複製

誒，這就是我們想要的。

列表內有輸入內容，後續操作破壞了原始順序，如果以index作為key，就會產生錯誤DOM

3. key的實現原理

要解釋key的實現原理，就要引入Vue一個十分重要的概念——【虛擬DOM】。

給出一組資料，Vue要把這些資料渲染到頁面上，首先要生成【虛擬DOM】，然後根據【虛擬DOM】去生成【真實的DOM】。如果資料發生了改變，Vue會生成【新的虛擬DOM】，注意，這個【新的虛擬DOM】並不會直接生成【新的真實DOM】，否則虛擬DOM一點用處也沒有了。Vue的操作是，拿根據新的資料生成的【新的虛擬DOM】與之前的【真實的DOM】去做比較，如果相同，直接延用即可（「拿來主義」）；如果不同，則生成新的DOM物件。

在這個過程中key扮演了很重要的角色。

根據最後一個範例進行剖析。