>[success] # key 屬性問什么要加 ~~~ 1.在我們做一些循環的時候，經常需要加key屬性，即使不加程序也能運行 ，那么key到底該加不加，應該用什么作為key的綁定，下面結論只代表 我個人的理解，可能有誤 ~~~ >[danger] ##### 官方文檔對key -- api 解釋 ~~~ * 文檔中解釋： 1.'key' 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。 如果不使用 'key'，'Vue' 會使用一種最大限度減少動態元素并且盡可能的嘗試修復/再利用 相同類型元素的算法。使用 key，它會基于 'key' 的變化重新排列元素順序，并且會移除 'key' 不存在的元素。 ~~~ >[info] ## 翻譯理解官方意思 ~~~ 1.下面的文章是參考了一下文章整理 2.下面文章中的'diff'算法筆者沒有實際去看過具體原理不懂，是根據下面 幾篇文章粗濾知道了大概意思，因此可能會出現部分誤差 ~~~ 文章參考： [簡書作者--Nanshannan《VUE中演示v-for為什么要加key》](https://www.jianshu.com/p/4bd5e745ce95) [思否作者--funnycoderstar 《為什么使用v-for時必須添加唯一的key?》](https://segmentfault.com/a/1190000013810844) [vue官方文檔解釋](https://cn.vuejs.org/v2/api/#key) [博客園作者-wind文章《詳解vue的diff算法》](https://www.cnblogs.com/wind-lanyan/p/9061684.html) [簡書作者--小進進不將就《React之diff算法》](https://www.jianshu.com/p/3ba0822018cf) [極客時間--視頻Vue實戰開發](https://time.geekbang.org/course/detail/163-86448) [vue官方文檔--為-v-for-設置鍵值-必要](https://cn.vuejs.org/v2/style-guide/?#%E4%B8%BA-v-for-%E8%AE%BE%E7%BD%AE%E9%94%AE%E5%80%BC-%E5%BF%85%E8%A6%81) [vue官方文檔--沒有在-v-if-v-else-if-v-else-中使用-key-謹慎使用](https://cn.vuejs.org/v2/style-guide/?#%E6%B2%A1%E6%9C%89%E5%9C%A8-v-if-v-else-if-v-else-%E4%B8%AD%E4%BD%BF%E7%94%A8-key-%E8%B0%A8%E6%85%8E%E4%BD%BF%E7%94%A8) >[danger] ##### 傳統的diff 算法 vs vue diff 算法 ~~~ 1.首先解釋一個名詞'diff' 算法:計算出Virtual DOM中真正變化的部分，并只 針對該部分進行原生DOM操作，而非重新渲染整個頁面。 2.傳統的diff算法，會出現，通過循環遞歸對節點進行依次對比，算法復雜度 達到 O(n^3) ，n是樹的節點數，這個有多可怕呢？——如果要展示1000個節 點，得執行上億次比較 3.vue的diff 算法如上圖所示: 3.1 對樹分層比較，兩棵樹 只對同一層次節點 進行比較。如果該節點不存 在時，則該節點及其子節點會被完全刪除，不會再進一步比較。 3.2 只需遍歷一次，就能完成整棵DOM樹的比較。 4.因此整個O(n^3)復雜度 轉化為 O(n)復雜度 ~~~ >[danger] ##### diff 算法已經優化了為啥還要加key * 根據上面的描述簡單勾勒出下面幾個場景 ~~~ 1.帶入一句話，就是同數量沒有增加或刪除，只是改變順序是只會觸發刷新 ，但有新增和刪除會觸發新增dom 并且銷毀改變的dom 2.key 還可以應用在組件上 3.文章參考中最后一篇官方文，可以注重看四五六的情況來品味 ~~~ * 第一場景移動 ~~~ 1.'F' 'E' 是掛載到'C' 節點上，當我們想把'B','C','D' 節點進行位置上的移動 根據上面講VUE 會比較同層的節點的改變，這樣相當于只要移動'B','C','D'， 而不需要，移動'B','C','D' 后再移動'E','F'，因為根據vue的規則來說'E','F'沒有 變化 ~~~  * 場景二新增刪除 ~~~ 1.根據上面的總結3.1條的描述，同層節點中'C'已經被刪除，因此，此時新的 節點樹中的'C' 被刪除，然后到下一層發現'B'節點上有'C' 節點注意此時不會 移動，因為在上一個層級'C'節點已經被刪除了，所以此時會創建一個新的'C' 和'E','F'節點 ~~~  * 場景三刪除新增 ~~~ 1.因此會吧'C'節點刪除，并且創建'G'節點，然后再接著重新創建'E','F'節點 ~~~  * 場景四更新刪除新建(三個同類型節點) 且無key ~~~ 1.要注意場景四是三個同類節點，場景1說的是三個不同類，舉個列子: 場景一: A 節點相當于'div',B節點相當于'span',C節點相當于'a',D節點相當于 'p標簽',場景四:A節點相當于'ul','B1','B2','B3'相當于'li' 2.不僅僅是dom 也可以是組件，相同組件也相當于場景四 3.此時場景四就可以抽象理解成我們在給ul 標簽中的 li 使用了 'v-for' 屬性 我們拖動了'B2' 移動到了'B1'的位置，發生同級中'B2'和'B1' 進行了移動， 但是'E','F'卻需要重新創建 ~~~  * 場景五更新刪除新建(三個同類型節點) 且有key ~~~ 1.要注意場景四是三個同類節點，場景1說的是三個不同類，舉個列子: 場景一: A 節點相當于'div',B節點相當于'span',C節點相當于'a',D節點相當于 'p標簽',場景四:A節點相當于'ul','B1','B2','B3'相當于'li' 2.不僅僅是dom 也可以是組件，相同組件也相當于場景四 3.此時場景四就可以抽象理解成我們在給ul 標簽中的 li 使用了 'v-for' 屬性 我們拖動了'B2' 移動到了'B1'的位置，發生同級中'B2'和'B1' 進行了移動， 但是因為有key 了，所以'E','F'就不需要創建直接跟著'B2'一起移動了 ~~~  * 場景六有key 插入 ~~~ 1.當有key的時候會直接插入'B4'并且會復用'B2'和'B3' ~~~  >[danger] ##### 對場景進行進一步總結 ~~~ 1.根據上面的場景，可以大概勾勒出v-for 針對場景四五六，因為循環出來的 肯定是想相同節點掛載，如果沒有用key 就會 出現場景四的效果重新生成 新的掛載節點 2.下面的例子會更加深入說明場景六沒有key 的樣子 ~~~ * 場景六特別說明 ~~~ 1.當某一層有很多相同的節點時，也就是列表節點時，Diff算法的更新過程默 認情況下也是遵循以上原則。 比如一下這個情況： ~~~  ~~~ 1.我們希望可以在B和C之間加一個F，Diff算法默認執行起來是這樣的： ~~~  ~~~ 1.即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很沒有效率？ 所以我們需要使用key來給每個節點做一個唯一標識，Diff算法就可以正確的 識別此節點，找到正確的位置區插入新的節點。 2.因此有了key，高效的更新虛擬DOM ~~~ >[success] # 注意點key 不要使用index ~~~ 1.v-for 中的最后一個例子有實際說明使用index 作為key的一個bug，不僅如 此，使用index作為key 的時候實際整個代碼是沒有實現場景六的效果， 而是實現了下面的情況 ~~~ * 使用index 作為key ~~~ 第一個數據可以復用之前的之外,另外三條數據都需要重新渲染; ~~~ ~~~ 之前的數據 之后的數據 key: 0 index: 0 name: test1 key: 0 index: 0 name: test1 key: 1 index: 1 name: test2 key: 1 index: 1 name: 我是插隊的那條數據 key: 2 index: 2 name: test3 key: 2 index: 2 name: test2 key: 3 index: 3 name: test3 ~~~ * 使用唯一元素例如id ~~~ 1.現在對比發現只有一條數據變化了,就是id為4的那條數據,因此只要新渲染 這一條數據就可以了,其他都是就復用之前的; ~~~ ~~~ 之前的數據 之后的數據 key: 1 id: 1 index: 0 name: test1 key: 1 id: 1 index: 0 name: test1 key: 2 id: 2 index: 1 name: test2 key: 4 id: 4 index: 1 name: 我是插隊的那條數據 key: 3 id: 3 index: 2 name: test3 key: 2 id: 2 index: 2 name: test2 key: 3 id: 3 index: 3 name: test3 ~~~