快捷導(dǎo)航

React、Vue中key的作用詳解 (key的內(nèi)部原理解析)

更新時間：2023年10月31日 09:07:44 作者：夕苜19

key是虛擬DOM對象的標(biāo)識,當(dāng)狀態(tài)中的數(shù)據(jù)發(fā)生變化時,Vue會根據(jù)[新數(shù)據(jù)]生成[新的虛擬DOM],本文給大家介紹React、Vue中key的作用詳解 (key的內(nèi)部原理解析),感興趣的朋友一起看看吧

1. 虛擬DOM中key的作用:

key是虛擬DOM對象的標(biāo)識，當(dāng)狀態(tài)中的數(shù)據(jù)發(fā)生變化時，Vue會根據(jù)[新數(shù)據(jù)]生成[新的虛擬DOM]

隨后Vue進行[新虛擬DOM]與[舊虛擬DOM]的差異比較，比較規(guī)則如下:

2. 對比規(guī)則:

(1).舊虛擬DOM中找到了與新虛擬DOM相同的key:

①.若虛擬DOM中內(nèi)容沒變，直接使用之前的真實DOM!

②.若虛擬DOM中內(nèi)容變了，則生成新的真實DOM，隨后替換掉頁面中之前的真實DOM。

(2).舊虛擬DOM中未找到與新虛擬DOM相同的key創(chuàng)建新的真實DOM，隨后渲染到到頁面。

3. 用index作為key可能會引發(fā)的問題:

(1).若對數(shù)據(jù)進行: 逆序添加、逆序刪除等破壞順序操作:

會產(chǎn)生沒有必要的真實DOM更新 ==> 界面效果沒問題，但效率低

(2).如果結(jié)構(gòu)中還包含輸入類的DOM:

會產(chǎn)生錯誤DOM更新 ==> 界面有問題

4. 開發(fā)中如何選擇key?

(1).最好使用每條數(shù)據(jù)的唯一標(biāo)識作為key，比如id、手機號、身份證號、學(xué)號等唯一值。

(2).如果不存在對數(shù)據(jù)的逆序添加、逆序刪除等破壞順序操作，僅用于渲染列表用于展示，

使用index作為key是沒有問題的。

<body>
    <div id="root">
        <h2>人員列表</h2>
        <button @click="add_liu">點擊添加一個老劉</button>
        <ul>
            <!-- <li v-for='p in persons' :key="p.id"> -->
            <li v-for='p in persons' :key="index">
                {{p.name}} - {{p.age}}  <input type="text">
            </li>
        </ul>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#root",
        data:{
            persons: [
                {
                    id: '001',
                    name: "張三",
                    age: 18,
                },
                {
                    id: '002',
                    name: "李四",
                    age: 19,
                },
                {
                    id: '003',
                    name: "王五",
                    age: 20,
                }
            ],
        },
        methods: {
            add_liu: function(){
                const liu = 
                {
                    id: '004',
                    name: "老劉",
                    age: 30,
                }
                this.persons.unshift(liu)
            }
        },
    })
</script>

到此這篇關(guān)于React、Vue中key的作用詳解 (key的內(nèi)部原理解析)的文章就介紹到這了,更多相關(guān)react vue key作用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: