Analisis ringkas tentang sebab Vue tidak boleh menggunakan indeks sebagai pengecam unik

vueMengapa anda tidak boleh menggunakan indeks sebagai pengecam unik? Artikel berikut akan memperkenalkan kepada anda sebab mengapa Vue tidak boleh menggunakan indeks sebagai pengecam unik saya harap ia akan membantu anda!

Ini melibatkan operasi DOM bagi js asli dan pengoptimuman yang dibawa oleh DOM maya Perkara berikut dibahagikan kepada dua bahagian untuk membincangkan

• Maya DOM
• Mengapa anda tidak boleh menggunakan indeks sebagai kunci [Cadangan berkaitan: tutorial video vuejs]

1 🎜> Mula-mula kita lihat cara untuk mengendalikan nod DOM secara asli Walau bagaimanapun, ia sangat memakan tenaga untuk penyemak imbas untuk bertindak balas kepada operasi DOM, kerana perubahan dalam nod akan menyebabkan penyemak imbas melakukan operasi penyusunan semula dan lukis semula (sila. rujuk

Proses Halaman Rendering Penyemak Imbas

)

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>Document</title>



    <div>
        <ul></ul>
    </div>
    <script>
        let ul = document.querySelector(&#39;ul&#39;)
        for (let i = 0; i < 3; i++) {
            let li = document.createElement(&#39;li&#39;)
            li.innerHTML = i + 1
            ul.appendChild(li)
        }
    </script>

Selain itu, banyak elemen kod js yang berubah secara dinamik menyebabkan penyemak imbas menyusun semula dan penggunaan tenaga boleh dibayangkan Jika beberapa bahagian berubah Sedikit demi sedikit, bukankah penyusunan semula setempat bagi nod yang diubah itu menjimatkan banyak prestasi? ? ? Dom maya yang diperkenalkan oleh vue menggunakan kaedah ini Berikut ialah sekeping kod vue

nbsp;html>



    <meta>
    <meta>
    <meta>
    <script></script>
    <title>Document</title>



    <div>
        <ul>
            <item></item>
        </ul>
        <button>change</button>
    </div>

    <script>
        new Vue({
            el: &#39;#app&#39;,
            data() {
                return {
                    list: [1, 2, 3]
                }
            },
            methods: {
                change() {
                    this.list.reverse()
                }
            },
            components: {
                item: {
                    props: [&#39;num&#39;],
                    template: `
            <div>
              {{num}}  
            
          `,
                    name: &#39;child&#39;
                }
            }
        })
    </script>

Apabila butang tukar diklik

Jika native js melakukan operasi sedemikian, ia pasti akan disusun semula, tetapi halaman hanya akan berubah sebahagiannya, tetapi Vue telah menjimatkan penggunaan tenaga dengan banyak selepas memperkenalkan dom maya

Jadi apakah itu DOM maya?

Dalam vue, anda boleh mendapatkan pepohon nod maya sebelum melaksanakan fungsi pemaparan dan anda boleh menggunakan pepohon nod maya untuk memaparkan halaman. Apabila nod dom halaman berubah secara dinamik, sebelum rendering, nod maya yang baru dijana akan dibandingkan dengan nod maya yang dijana terakhir, dan hanya bahagian yang berbeza akan dipaparkan Setiap nod maya ialah objek, menerangkan ciri-ciri lapisan bekas . Berikut ialah pokok nod maya sebelum mengklik butang tukar dalam kod vue

vndoe = {
    tag: 'ul',
    children: [
        { tag: 'li',key:0, children: [{ vnode: { text: '3' } }] },
        { tag: 'li',key:1, children: [{ vnode: { text: '2' } }] },
        { tag: 'li',key:2, children: [{ vnode: { text: '1' } }] }

    ]
}复制代码

Apabila perubahan diklik, pokok nod maya baharu akan dijana dan dibandingkan dengannya

Selepas perbandingan, hanya perbezaan yang diberikan

Jadi bagaimana untuk mencari perbezaan dalam bilangan dua nod maya ? Ini melibatkan algoritma perbezaan kod sumber vue

Apabila kitaran hayat dipasang, selagi sumber data berubah, panggilan balik pemerhati pemerhati akan dicetuskan vm._update(v_rander())

_update akan menjana vnode kepada _patch_ untuk mencari

yang berbeza
Apa yang dimulakan dalam _patch_ ialah algoritma diff

kunci ialah pengecam unik untuk membuat algoritma diff lebih cekap Cari dengan tepat dua nod yang perlu dibandingkan

2 Kemudian mengapa kita tidak boleh menggunakan indeks sebagai kunci

Kami. masih menggunakan kod sebelumnya untuk melihatnya, dalam algoritma diff , kunci ialah pengecam unik Apabila dua pepohon nod maya dibandingkan, nilai kunci yang sama akan ditemui untuk perbandingan Jika didapati bahawa nilai kunci adalah sama tetapi data di dalamnya berbeza, algoritma diff akan menentukan bahawa ia telah berubah dan memaparkannya semula, sebenarnya, mereka hanya menukar kedudukan mereka Apabila kami menambah id pengenalan unik padanya

nbsp;html>    <meta>    <meta>    <meta>    <script></script>    <title>Document</title>    <div>        <ul>            <item></item>        </ul>        <button>change</button>    </div>    <script>        new Vue({            el: &#39;#app&#39;,            data() {                return {                    list: [{                        n: 1,                        id: 0
                    }, {                        n: 2,                        id: 1
                    }, {                        n: 3,                        id: 2
                    }, ]
                }
            },            methods: {                change() {                    this.list.reverse()
                }
            },            components: {                item: {                    props: [&#39;num&#39;],                    template: `
            <div>
              {{num}}  
            
          `,                    name: &#39;child&#39;
                }
            }
        })  </script>复制代码

Perbandingan pepohon nod maya selepas mengklik perubahan

Apabila algoritma diff menemui nilai kunci yang sama untuk perbandingan, dan mendapati bahawa nilai kunci adalah sama tetapi data di dalamnya juga sama, ia tidak akan memaparkan semula, tetapi menukar kedudukan mereka, yang sangat menjimatkan penggunaan pelayar Oleh itu, menggunakan indeks sebagai kunci akan menyebabkan pengoptimuman dalam diff gagal (mengurangkan kebolehgunaan semula dan melanggar niat asal. maya Dom)

Kelemahan memadam indeks data sebagai kunci adalah lebih jelas

nbsp;html>    <meta>    <meta>    <meta>    <script></script>    <title>Document</title>    <div>        <ul>            <li>                <item></item>            </li>        </ul>        <button>del</button>    </div>    <script>        new Vue({            el: &#39;#app&#39;,            data() {                return {                    list: [1, 2, 3]
                }
            },            methods: {                del() {                    this.list.splice(0, 1)
                }
            },            components: {                item: {                    template: &#39;<div>{{Math.random()}}&#39;
                }
            }
        })    </script>复制代码

Selepas mengklik butang padam

Kami mendapati ia benar-benar memadamkan item terakhir, kerana selepas memadamkan data, disebabkan oleh ciri tatasusunan, indeks subskrip dan kunci data yang tinggal akan ditukar kepada -1, iaitu kedua, tiga kunci data akan ditukar daripada 1, 2 menjadi 0,1, algoritma diff akan berfikir bahawa kandungan data kunci 0,1 telah berubah, dan kandungan kunci 3 telah dipadamkan, jadi ia akan memaparkan semula yang pertama dan data kedua dan padam data ketiga, tetapi sebenarnya kami memadamkan Kandungan pertama, kedua, dan ketiga adalah nilai utama yang telah berubah. Vue tidak akan membandingkan kandungan teks sub-komponen secara mendalam Ia hanya dapat melihat bahawa objek pada lapisan luar telah berubah salah

(Mempelajari perkongsian video: pembangunan bahagian hadapan web, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Analisis ringkas tentang sebab Vue tidak boleh menggunakan indeks sebagai pengecam unik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!