vue中key的作用

v-for中為什麼要加key呢，這裡我給大家舉個栗子

沒有key：

>

"text" v-model=
"name"
>
"add"
>新增<
/button>
<
/div>
for=
"(item, i) in list"
>
"checkbox"
>
}<
/li>
<
/ul>
// 建立 vue 例項，得到 viewmodel
var vm =
newvue(,
,]},
methods:
)this
.name =''}
}});
<
/script>
<
/div>當選中呂不為時，新增楠楠後選中的確是李斯，並不是我們想要的結果，我們想要的是當新增楠楠後，一種選中的是呂不為
有key:
>
"text" v-model=
"name"
>
"add"
>新增<
/button>
<
/div>
for=
"(item, i) in list"
:key=
"item.id"
>
"checkbox"
>
}<
/li>
<
/ul>
// 建立 vue 例項，得到 viewmodel
var vm =
newvue(,
,]},
methods:
)this
.name =''}
}});
<
/script>
<
/div>同樣當選中呂不為時，新增楠楠後依舊選中的是呂不為。
接下來我們具體來說說key的作用
其實不只是vue，react中在執行列表渲染時也會要求給每個元件新增上key這個屬性。
要解釋key的作用，不得不先介紹一下虛擬dom的diff演算法了。
我們知道，vue和react都實現了一套虛擬dom，使我們可以不直接操作dom元素，只運算元據便可以重新渲染頁面。而隱藏在背後的原理便是其高效的diff演算法。
vue和react的虛擬dom的diff演算法大致相同，其核心是基於兩個簡單的假設：
兩個相同的元件產生類似的dom結構，不同的元件產生不同的dom結構
同一層級的一組節點，他們可以通過唯一的id進行區分
基於以上這兩點假設，使得虛擬dom的diff演算法的複雜度從o(n^3)降到了o(n)。
這裡我們借用react』s diff algorithm中的一張圖來簡單說明一下：
當頁面的資料發生變化時，diff演算法只會比較同一層級的節點：

** 如果節點型別相同，則會重新設定該節點的屬性，從而實現節點的更新。

當某一層有很多相同的節點時，也就是列表節點時，diff演算法的更新過程預設情況下也是遵循以上原則。

所以我們需要使用key來給每個節點做乙個唯一標識，diff演算法就可以正確的識別此節點，找到正確的位置區插入新的節點。

Vue中key的作用

相信大多數vue開發者接觸到key屬性的時候是使用v for進行列表渲染的時候，如果不使用key屬性，vue會產生警告，那麼在這個時候key屬性的作用是什麼呢？官方文件中說 當 vue.js 用v for正在更新已渲染過的元素列表時，它預設用 就地復用 策略。如果資料項的順序被改變，vue 將不會移...

vue中key的作用

vue和react都實現了一套虛擬dom，使我們可以不直接操作dom元素，只運算元據便可以重新渲染頁面。其功勞歸功於背後高效的diff演算法。兩個相同的元件產生類似的dom結構，不同的元件產生不同的dom結構。同一層級的一組節點，他們可以通過唯一的id進行區分。當頁面的教據發生變化時，diff演算法...

Vue中key的作用

官方文件 vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。這麼做除了使 vue 變得非常快之外，還有其它一些好處。例如，如果你允許使用者在不同的登入方式之間切換 usernamelabel template emaillabel template 那麼在上面的 中切換login...