詳解如何理解vue的key屬性

如果沒有這個屬性的時候vue應用 in-place patch（就地復用）策略。列表里的順序發生改變的時候比如shuffle（列表打亂）的時候，vue為了提升性能，不會移動dom元素，只是更新相應元素的內容節點。

就地復用的弊端

這個默認的模式是高效的，但是只適用于不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。

如上引用自官網，這個模式就是上面的“就地復用”策略。那么是不是依賴子組件狀態的列表渲染采用上面的模式就出問題了呢。如下測試代碼：

 <ul>
 <li v-for="item in items">
 <p>{{ item.title }}</p>
 <p>{{ item.des }}</p>
 <tweet-component></tweet-component>
 </li>
 </ul>
 <script>
 Vue.component("tweet-component", {
 template: `
 <div class="tweet">
 <div class="box">
 {{xixi}}
 </div>
 </div>
 `,
 data() {
 return {
 xixi: Math.random()
 };
 }
 });
 new Vue({
 el: "#app",
 data: {
 items: [
 { title: "nihao1", des: "xiexie1" },
 { title: "nihao2", des: "xiexie2" },
 { title: "nihao3", des: "xiexie3" }
 ]
 },
 methods: {
 shuffle() {
 // lodash的shuffle方法
 this.items = _.shuffle(this.items);
 }
 }
 });
 </script>

操作如下：

問題出現了：發生變化時，子組件 沒有更新

ps: 測試臨時 DOM 狀態 (例如：表單輸入值)可以參考這個鏈接 List Rendering and Vue's v-for Directive

key的作用

這個時候引入 key 就可以解決這個問題。 key 的作用是給予一個節點唯一的身份識別，有相同父元素的子元素必須有獨特的 key 。這樣它可以前后對比，算出哪些節點是要重復使用或者調整順序。比如原先的 key 的順序是 i1,i2,i3 ，之后變成了 i2,i1,i3 這個時候只要i3保持不變，把i2 insertBefore 到i1節點前就行了（以上是舉例，vue具體怎么操作的需要去研究源碼）。如果是利用數組的 index 來作為 key 則兩次對比沒有區別，就會出現上面動圖里出現的子組件沒有更新的情況。

可以通過查看下面兩個動圖查看dom節點的變化。第一個gif是沒有使用 key ,第二個是使用了 key 。可以看到我點了按鈕后，第一個只是更新 <p> 標簽的內容節點。第二個是移動了某一項的 <li> 標簽。

ps: 另外可以通過chrome的dom斷點功能查看子元素的插入刪除。

DOM 更改斷點

key的其他用途

key不是只能用在v-for上還可以用在其他元素上。如下代碼

<div v-if="toggle">Hello</div>
<div v-else>Goodbye</div>

切換toggle時，它也是切換div。如果你想用上enter/leave animations時，即節點插入和刪除的時候的動畫時就要打破這個復用，如下：

<transition>
 <div v-if="toggle" key="1">Hello</div>
 <div v-else key="2">Goodbye</div>
</transition>

總結

如果你的列表不發生變化，或者你只是往列表最后一項添加元素則看似不必要增加 key 字段。但是你的項目中有很多列表的時候，你有的需要加 key ，有的不需要加。還不如所有的都加上呢避免別人理解困難(^._.^)ﾉ。

參考鏈接

https://vuejs.org/v2/guide/list.html#key

vuejs.org/v2/api/#key

https://forum.vuejs.org/t/simple-clarification-of-when-using-key-with-v-for-is-appropriate-and-why/28966/5

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com