vue中的key有什么用

  
    哈哈哈

這里的div就是一個(gè)虛擬節(jié)點(diǎn), 在vue中, 它以這種形式存在

    const vnode = {
      type: "div",
      props: {
        class: "title",
        style: {
          "font-size": "30px",
          color: "red",
        },
      },
      children: "哈哈哈",
    };

不理解的地方可能是children這個(gè)屬性, 因?yàn)楝F(xiàn)在div沒(méi)有子元素, 因此值僅僅為"哈哈哈", 若有子元素, 那么就會(huì)是一直套娃套下去, 套到最后一個(gè)結(jié)點(diǎn)為止, 如

      children: [
        {
          // 子元素
        },
        {
          // 子元素
        }
      ],

2 vDOM 虛擬DOM

和真實(shí)DOM一樣, 有真實(shí)節(jié)點(diǎn)就有真實(shí)DOM, 那么有虛擬節(jié)點(diǎn), 就有虛擬DOM

當(dāng)然虛擬DOM tree也一樣咯, 也有叫VNode tree的, 一個(gè)意思, 這個(gè)不需要糾結(jié), 大概是下面這樣

轉(zhuǎn)換成虛擬DOM樹 :

虛擬DOM在渲染成真實(shí)DOM時(shí), 不一定是完全一樣的, 這里涉及到組件的問(wèn)題, 后面有機(jī)會(huì)在講

3 渲染過(guò)程

4 案例 : 插入f

理解完前面的后, 這里開(kāi)始正題, 僅需一個(gè)案例, 就能全盤理解key的作用, 下面開(kāi)始

先看這個(gè)簡(jiǎn)單的案例(沒(méi)加key)

    

      {{item}}
    

      data() {
        return {
          letters: ['a', 'b', 'c', 'd']
        }
      },
      methods: {
        insertF() {
          this.letters.splice(2, 0, 'f');
        }
      },

可以看出, 該題的目的是想在ab與cd之間, 插入一個(gè)f

理解了這個(gè)簡(jiǎn)單的案例后, 我們開(kāi)始想, 有什么方法來(lái)插入到真實(shí)DOM中呢 ?

有以下三種 :

方法一(普通方法)

說(shuō)明 : 直接把以前的dom刪掉, 用新的vnode重新渲染一遍

方法二(不帶key的diff算法)

說(shuō)明 : 這是不帶key時(shí), vue默認(rèn)的diff算法, 對(duì)應(yīng)的源碼如圖

vue會(huì)通過(guò)判斷語(yǔ)句, 來(lái)判斷你是否帶了key

下面是無(wú)key時(shí)的情況

然后查看patchUnkeyedChildren(), 就能查看diff算法的執(zhí)行過(guò)程

這里簡(jiǎn)單描述下 :

• 取到舊vnode和新vnode

• 判斷兩者哪個(gè)數(shù)組長(zhǎng)度較小(用較小的數(shù)組patch較大的數(shù)組, 才不會(huì)引起數(shù)組越界)

• 開(kāi)始patch, 也就是圖片提到的, 一直patch到?jīng)]有空間時(shí)(新vnode的c處), 分兩種情況

• 舊vnode < 新vnode時(shí)(也就是圖片這種情況), 則需把多的值(此處為d)掛載至新node

• 舊vnode > 新vnode時(shí), 則卸載舊vnode節(jié)點(diǎn)

• 結(jié)束循環(huán)

方法三(帶key的diff算法)

同理, 跟著方法二的步驟就能查看到patchKeyedChildren()方法

這一種方法才是精髓, 開(kāi)始復(fù)雜了

• 先從頭patch, 發(fā)現(xiàn)不相同時(shí)(此處為c !== f), break

• 從尾部patch, 發(fā)現(xiàn)不相同時(shí)(此處為c !== f), break

  到目前為止, a, b, c, d 已經(jīng)被渲染至真實(shí)DOM中, 就差f了, 下面就開(kāi)始找f

• 判斷 :

• 若舊vnode < 新vnode, 則掛載至新vnode

• 若新vnode > 舊vnode, 則卸載舊vnode多余的節(jié)點(diǎn)

• 若新vnode = 舊vnode, 這個(gè)就很復(fù)雜了, 就不管順序, 在里面盡量patch到相同的項(xiàng), 然后在進(jìn)行卸載和掛載操作

看完了這篇文章，相信你對(duì)“vue中的key有什么用”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！