Apakah Key in vue? Apakah perbezaan antara menetapkan kunci dan tidak menetapkannya?-View.js-php.cn

Apakah Key in vue? Apakah perbezaan antara menetapkan kunci dan tidak menetapkannya?

青灯夜游

Lepaskan： 2022-05-19 21:09:45

ke hadapan

4212 orang telah melayarinya

Apakah Key in vue? Artikel berikut akan memperkenalkan kepada anda prinsip kunci dalam vue, dan bercakap tentang perbezaan antara kunci tetapan dan bukan kunci tetapan saya harap ia akan membantu semua orang.

Apakah Key in vue? Apakah perbezaan antara menetapkan kunci dan tidak menetapkannya?

1 Apa Itu Kunci

Sebelum kita mula, mari kita memulihkan dua adegan kerja sebenar

Apabila kita menggunakan v-for, kita perlu menambah masa yang dijana oleh key

<ul>
    <li v-for="item in items" :key="item.id">...</li>
</ul>

Salin selepas log masuk

pada unit Poke sebagai new Date() dan secara manual memaksa pencetus pemaparan semula key

<Comp :key="+new Date()" />

Salin selepas log masuk

Jadi apakah logik di sebalik ini dan apakah peranan

? key

Dalam satu ayat

kunci ialah ID unik yang diberikan kepada setiap vnod, dan ia juga merupakan strategi pengoptimuman perbezaan dengan lebih tepat dan lebih pantas nod vnod. (Belajar perkongsian video: tutorial video vue)

Logik di sebalik tabir

Apabila kita menggunakan

, kita perlu Tambahkan v-forkey

Cap masa yang dijana digunakan sebagai

dan secara manual dipaksa untuk mencetuskan pemaparan semula new Date()key

Apabila penyampaian semula dengan nilai baharu digunakan sebagai kunci dan Comp dengan kekunci baru muncul, kemudian kekunci lama Comp akan dialihkan Kecuali, kekunci baharu Comp mencetuskan pemaparan

2. Perbezaan antara menetapkan kunci dan tidak menetapkan kunci

Contohnya:

Buat contoh dalam 2 saat Selepas memasukkan data ke dalam tatasusunan

items

tanpa menggunakan

<body>
  <div id="demo">
    <p v-for="item in items" :key="item">{{item}}</p>
  </div>
  <script src="../../dist/vue.js"></script>
  <script>
    // 创建实例
    const app = new Vue({
      el: &#39;#demo&#39;,
      data: { items: [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;, &#39;d&#39;, &#39;e&#39;] },
      mounted () {
        setTimeout(() => { 
          this.items.splice(2, 0, &#39;f&#39;)  // 
       }, 2000);
     },
   });
  </script>
</body>

Salin selepas log masuk

akan melaksanakan operasi ini: keyvue

Apakah Key in vue? Apakah perbezaan antara menetapkan kunci dan tidak menetapkannya? Analisis keseluruhan proses:

Bandingkan A, A, nod jenis yang sama, lakukan

tidak berlaku patchdomBandingkan B, B, Nod jenis yang sama, lakukan
berlaku patchdom Bandingkan C, F, nod jenis yang sama, melakukan
berlakupatchdom Bandingkan D, C, nod jenis yang sama, teruskan
berlaku patchdom Bandingkan E, D, nod jenis yang sama, teruskan
berlaku patchdom dan gelung berakhir, masukkan E ke dalam
DOM

Dalam kes menggunakan

akan melakukan operasi sedemikian: keyvue

bandingkan A, A, nod jenis yang sama, lakukan

tidak akan berlaku Operasi patchdomBandingkan B, B, nod daripada jenis yang sama, teruskan
OperasipatchdomBandingkan C, F, nod berlainan jenis
Bandingkan E dan E, nod daripada jenis yang sama, lakukan
- berlakupatchdom
Bandingkan D, D, nod jenis yang sama , lakukan
tidak berlaku patchdom Bandingkan C dan C, nod jenis yang sama, lakukan
operasi tidak berlaku patch domGelung berakhir, sebelum F dimasukkan ke dalam C

Melalui dua di atas contoh kecil, anda boleh melihat tetapan

Ia boleh mengurangkan operasi

pada halaman dan meningkatkan kecekapan key DOMdiff

Boleh menetapkan nilai kunci pasti meningkatkan kecekapan perbezaan ?

Malah, ini tidak berlaku dalam dokumen itu juga dengan jelas menyatakan bahawa

Apabila Vue.js menggunakan v-for untuk mengemas kini senarai elemen yang diberikan, ia lalai kepada "dalam. -tempat guna semula" Strategi. Jika susunan item data diubah, Vue tidak akan mengalihkan elemen DOM untuk memadankan susunan item data, tetapi hanya akan menggunakan semula setiap elemen di sini dan memastikan ia memaparkan setiap elemen yang telah dipaparkan pada indeks tertentu

Mod lalai ini cekap, tetapi ia hanya sesuai untuk output pemaparan senarai yang tidak bergantung pada keadaan subkomponen atau keadaan DOM sementara (contohnya: nilai input borang)

Adalah disyorkan untuk menggunakannya bila-bila boleh

Disediakan

melainkan merentasi kandungan DOM output adalah sangat mudah, atau anda sengaja bergantung pada tingkah laku lalai untuk mendapatkan peningkatan prestasi v-for

三、原理分析

源码位置：core/vdom/patch.js

里判断是否为同一个key，首先判断的是key值是否相等如果没有设置key，那么key为undefined，这时候undefined是恒等于undefined

function sameVnode (a, b) {
    return (
        a.key === b.key && (
            (
                a.tag === b.tag &&
                a.isComment === b.isComment &&
                isDef(a.data) === isDef(b.data) &&
                sameInputType(a, b)
            ) || (
                isTrue(a.isAsyncPlaceholder) &&
                a.asyncFactory === b.asyncFactory &&
                isUndef(b.asyncFactory.error)
            )
        )
    )
}

Salin selepas log masuk

updateChildren方法中会对新旧vnode进行diff，然后将比对出的结果用来更新真实的DOM

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
    ...
    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
        if (isUndef(oldStartVnode)) {
            ...
        } else if (isUndef(oldEndVnode)) {
            ...
        } else if (sameVnode(oldStartVnode, newStartVnode)) {
            ...
        } else if (sameVnode(oldEndVnode, newEndVnode)) {
            ...
        } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
            ...
        } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
            ...
        } else {
            if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
            idxInOld = isDef(newStartVnode.key)
                ? oldKeyToIdx[newStartVnode.key]
                : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
            if (isUndef(idxInOld)) { // New element
                createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
            } else {
                vnodeToMove = oldCh[idxInOld]
                if (sameVnode(vnodeToMove, newStartVnode)) {
                    patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
                    oldCh[idxInOld] = undefined
                    canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
                } else {
                    // same key but different element. treat as new element
                    createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
                }
            }
            newStartVnode = newCh[++newStartIdx]
        }
    }
    ...
}

Salin selepas log masuk

（学习视频分享：web前端开发、编程基础视频）

Atas ialah kandungan terperinci Apakah Key in vue? Apakah perbezaan antara menetapkan kunci dan tidak menetapkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!