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

就地復用的弊端

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

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

 <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>

操作如下：

問題出現(xiàn)了：發(fā)生變化時，子組件 沒有更新

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

key的作用

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

可以通過查看下面兩個動圖查看dom節(jié)點的變化。第一個gif是沒有使用 key ,第二個是使用了 key ?？梢钥吹轿尹c了按鈕后，第一個只是更新 <p> 標簽的內容節(jié)點。第二個是移動了某一項的 <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時，即節(jié)點插入和刪除的時候的動畫時就要打破這個復用，如下：

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

總結

如果你的列表不發(fā)生變化，或者你只是往列表最后一項添加元素則看似不必要增加 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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論