6Vue深入理解之v for中key的真正作用

2022-10-10 18:36:12 字數 474 閱讀 7901

那麼接下來筆者將用幾個小案例來講述這兩種方式在渲染時有什麼明顯的差別。

我們先來看看**

替換資料

**和上面差不多,只是新增了 id 並繫結到 key 裡面,

接下來我們參考上面的流程走一遍看看這次有什麼不同之處。

聰明的你已經看出來了,刪掉第二條後,點選調換資料 會生成新的三條出來,而不是兩條,原理我相信你也懂了,替換資料的那批 id 與上一批不一樣,所以 vue 比較後發現不同就幫我們生成新的 dom

以上便是使用 index 和 唯一 id 的明顯區別

另外,像 唯一id 不止上面這一種繫結方式,我們也可以在 v-for 裡面使用 :key="math.random()" 生成唯一id,但這種會有一些細微的差別,這裡筆者就不去舉例了,至於使用哪種 key 可以提公升效能方面的相關知識不是本章的初衷,讀者可以自行到網上搜尋,相信你只要能理解上面這兩種繫結 key 的作用差別在**,那麼其它的繫結方式對你來講一定不是難題。

深入理解ES6之《解構》

如果使用var let const解析宣告變數,則必須提供初始化程式 也就是等號右側的值 以下語句有語法錯誤 var let const解構賦值表示式 也就是右側的表示式 如果為null或undefined會導致程式丟擲錯誤,因為任何嘗試讀取null或undefined的屬性的行為都會觸發執行時錯誤...

關於vue中的nextTick深入理解

nexttick的由來 由於vue的資料驅動檢視更新,是非同步的,即修改資料的當下,檢視不會立刻更新,而是等同一事件迴圈中的所有資料變化完成之後,再統一進行檢視更新。nexttick的觸發時機 在同一事件迴圈中的資料變化後,dom完成更新,立即執行nexttick callback 內的 應用場景 ...

深入理解ES6之《擴充套件物件》

當物件字面量只有乙個屬性的名稱時,js引擎會在可訪問作用域中查詢其同名變數 如果找到則該變數的值被賦給物件字面量裡的同名屬性 function createperson name,age var person 在es5中如果屬性名中包含空格或者是動態的字串變數作為屬性名,則需要用方括號來訪問,如下所...