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

Rumah

hujung hadapan web

View.js

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

青灯夜游

May 19, 2022 pm 09:09 PM

vuevue.js

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>

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

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

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

Jika kunci digunakan, Vue akan merekodkan elemen mengikut susunan kekunci Jika elemen yang pernah mempunyai kunci itu tidak lagi muncul, ia akan terus dikeluarkan atau dimusnahkan
Gunakan

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>

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
Sebanyak 0 kemas kini dan 1 operasi sisipan berlaku

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

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]
        }
    }
    ...
}

（学习视频分享：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!

Kenyataan

Artikel ini dikembalikan pada:掘金社区. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel Berkaitan

Pilihan Rangka Kerja: Apa yang mendorong keputusan Netflix?Apr 13, 2025 am 12:05 AM

Netflix terutamanya menganggap prestasi, skalabiliti, kecekapan pembangunan, ekosistem, hutang teknikal dan kos penyelenggaraan dalam pemilihan rangka kerja. 1. Prestasi dan Skalabiliti: Java dan Springboot dipilih untuk memproses data besar -besaran dan permintaan serentak yang tinggi. 2. Kecekapan Pembangunan dan Ekosistem: Gunakan React untuk meningkatkan kecekapan pembangunan front-end dan menggunakan ekosistemnya yang kaya. 3. Hutang Teknikal dan Penyelenggaraan Kos: Pilih Node.js untuk membina mikroservis untuk mengurangkan kos penyelenggaraan dan hutang teknikal.

React, Vue, dan Masa Depan Frontend NetflixApr 12, 2025 am 12:12 AM

Netflix terutamanya menggunakan React sebagai rangka kerja front-end, ditambah dengan VUE untuk fungsi tertentu. 1) Komponen React dan DOM maya meningkatkan prestasi dan kecekapan pembangunan aplikasi Netflix. 2) VUE digunakan dalam alat dalaman dan projek kecil Netflix, dan fleksibiliti dan kemudahan penggunaannya adalah kunci.

Vue.js di frontend: aplikasi dan contoh dunia nyataApr 11, 2025 am 12:12 AM

Vue.js adalah rangka kerja JavaScript yang progresif yang sesuai untuk membina antara muka pengguna yang kompleks. 1) Konsep terasnya termasuk data responsif, komponen dan DOM maya. 2) Dalam aplikasi praktikal, ia boleh ditunjukkan dengan membina aplikasi todo dan mengintegrasikan vuerouter. 3) Apabila debugging, disyorkan untuk menggunakan Vuedevtools dan Console.log. 4) Pengoptimuman prestasi boleh dicapai melalui V-IF/V-Show, senarai pengoptimuman rendering, pemuatan asynchronous komponen, dll.

Vue.js dan bertindak balas: Memahami perbezaan utamaApr 10, 2025 am 09:26 AM

Vue.js sesuai untuk projek kecil dan sederhana, sementara React lebih sesuai untuk aplikasi besar dan kompleks. 1. Sistem responsif vue.js secara automatik mengemas kini DOM melalui pengesanan ketergantungan, menjadikannya mudah untuk menguruskan perubahan data. 2. Leact mengamalkan aliran data sehala, dan data mengalir dari komponen induk ke komponen kanak-kanak, menyediakan aliran data yang jelas dan struktur yang mudah dibuang.

Vue.js vs React: Pertimbangan khusus projekApr 09, 2025 am 12:01 AM

Vue.js sesuai untuk projek kecil dan sederhana dan lelaran yang cepat, sementara React sesuai untuk aplikasi besar dan kompleks. 1) Vue.js mudah digunakan dan sesuai untuk situasi di mana pasukan tidak mencukupi atau skala projek kecil. 2) React mempunyai ekosistem yang lebih kaya dan sesuai untuk projek dengan prestasi tinggi dan keperluan fungsional yang kompleks.

Cara melompat tag ke vueApr 08, 2025 am 09:24 AM

Kaedah untuk melaksanakan lompatan tag dalam Vue termasuk: menggunakan tag dalam templat HTML untuk menentukan atribut HREF. Gunakan komponen router-link routing VUE. Gunakan ini. $ Router.push () kaedah dalam JavaScript. Parameter boleh dilalui melalui parameter pertanyaan dan laluan dikonfigurasikan dalam pilihan penghala untuk lompatan dinamik.

Cara melaksanakan lompat komponen untuk vueApr 08, 2025 am 09:21 AM

Terdapat kaedah berikut untuk melaksanakan lompat komponen di Vue: Gunakan Router-Link dan & lt; Router-View & GT; Komponen untuk melaksanakan lompat hiperpautan, dan tentukan: untuk atribut sebagai laluan sasaran. Gunakan & lt; router-view & gt; Komponen secara langsung untuk memaparkan komponen yang dijalankan yang sedang dialihkan. Gunakan kaedah router.push () dan router.replace () untuk navigasi programatik. Bekas menjimatkan sejarah dan yang kedua menggantikan laluan semasa tanpa meninggalkan rekod.

Cara melompat ke Div VueApr 08, 2025 am 09:18 AM

Terdapat dua cara untuk melompat elemen div di Vue: Gunakan Vue Router dan tambahkan komponen router-link. Tambah pendengar acara @Click dan panggil ini. $ Router.push () kaedah untuk melompat.

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang laluByDDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.