key -- 作用（后續要更新） · vue3.x -- 系列學習

>[success] # key 作用 1. 在`v-for` 時候經常會給節點加上 `key` 屬性對應值可以是`number | string | symbol`，這個`key` 是特殊 `attribute `主要用做 `Vue `的虛擬 `DOM `算法的提示，以在比對新舊節點組時辨識 `VNodes` * **不使用** `key`，`Vue `會使用一種算法來最小化元素的移動并且盡可能嘗試就地**修改/復用相同類型元素**。 * **使用** `key `時，它會基于 `key `的順序變化重新排列元素，并且那些使用了已經不存在的 `key `的元素將會被**移除/銷毀** [官方文檔解釋](https://cn.vuejs.org/api/built-in-special-attributes.html#key) >[danger] ##### 額外補充關于Vnode 1. **VNode**的全稱是`Virtual Node`，也就是**虛擬節點**，`VNode`的本質是一個`JavaScript`的對象（`template =》vnode =》真實DOM`） 2. 同過比較新老的 `vnode` 可以判斷出新老變化中沒有改變的**節點**，將這些節點的在**老Vonde 渲染的真實dom 對象直接服用給新Vnode 的真實dom對象** [具體可參考](http://www.hmoore.net/cyyspring/webpack/3079650) >[info] ## 源碼位置 1. 通過[**源碼位置**](https://github1s.com/vuejs/core/blob/main/packages/runtime-core/src/renderer.ts)代碼可以發現`Vue`事實上會對于**有key和沒有key會調用兩個不同的方法**； * **有`key`**，使用 `patchKeyedChildren `方法； * **沒有`key`**，使用 `patchUnkeyedChildren`方法； >[danger] ##### 簡單來看patchUnkeyedChildren -- 沒key 情況 * 舉個例子現在有個展示 `a b c d` 經過展示后需要變成 `a b f c d`,但在循環的過程中并沒有綁定`key`，形成的代碼如下 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <button @click="add">新增</button> <div v-for="item in list">{{item}}</div> </div>  <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ // data: option api data() { return { list: ['a', 'b', 'c', 'd'], } }, methods: { add() { this.list.splice(2, 0, 'f') }, }, }) app.mount('#app') </script> </body> </html> ~~~ * 上面代碼整體執行后效果在源碼中過程 1. 獲取到舊vnode和新vnode**判斷兩者哪個數組長度較小(用較小的數組patch較大的數組, 才不會引起數組越界)** 2. 進入`patch`, 分兩種情況 **舊vnode < 新vnode** ，如果新的多創建多出的部分。**舊vnode > 新vnode** ，如果老的多 **（則卸載舊vnode節點）直接刪除比新的多出的部分** 3. 在這個過程中如下圖，在比較過程中發現 `a b` 節點并沒有發生改變，直接就可以將 `a,b 老的vnode 映射的真實dom` 直接賦值給 `a,b 新Vonde的真實節點`，其他節點怎**C更新成F，D更新成C，E更新成D，最后再插入F**，整體看只有前兩個節點進行了真實dom 復用，后面的節點都是進行了變更 ![](https://img.kancloud.cn/8b/17/8b175bffe2eda56b2f7183cf219d4a0e_691x688.png) * 代碼位置 ![](https://img.kancloud.cn/c5/e1/c5e16d6005d651d3cdf142201d9e7243_936x721.png) >[danger] ##### patchKeyedChildren - 有key 1. **有key 情況會進行進行diff算法的時候，并且會復用相同節點** ![](https://img.kancloud.cn/7b/0e/7b0e34532991c7119c81d40d240b5db7_1434x740.png) >[info] ## 注意點key 不要使用index * 使用index 作為`key`第一個數據可以復用之前的之外,另外三條數據都需要重新渲染;因為`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`現在對比發現只有一條數據變化了,就是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 ~~~ >[info] # 重新整理這個 http://www.hmoore.net/cyyspring/vuejs/1129266#_key_276 >[info] ## 參考文章 [深入解析vue中的key，看看key到底能拿來干嘛！](https://www.php.cn/vuejs/486467.html)