如何理解vue的key屬性

嘻嘻xixi發表於2019-04-12
Vue

如果沒有這個屬性的時候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>
複製程式碼

操作如下：

如何理解vue的key屬性
問題出現了：發生變化時，子元件沒有更新。

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

key的作用

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

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

如何理解vue的key屬性 如何理解vue的key屬性

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，有的不需要加。還不如所有的都加上呢避免別人理解困難(^._.^)ﾉ。

參考連結

vuejs.org/v2/guide/li…

vuejs.org/v2/api/#key

forum.vuejs.org/t/simple-cl…

相關文章