vue 用 key 管理可複用的元素

Vue 會盡量高效地渲染元素，一般會複用已有元素而不是從頭開始渲染。這麼作除了使 Vue 變得很是快以外，還有其它一些好處。例如，若是你容許用戶在不一樣的登陸方式之間切換：

<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address"> </template>

那麼在上面的代碼中切換 loginType 將不會清除用戶已經輸入的內容。由於兩個模板使用了相同的元素，<input> 不會被替換掉——僅僅是替換了它的 placeholder。

本身動手試一試，在輸入框中輸入一些文本，而後按下切換按鈕：

Username 

Toggle login type

這樣也不老是符合實際需求，因此 Vue 爲你提供了一種方式來表達「這兩個元素是徹底獨立的，不要複用它們」。只需添加一個具備惟一值的 key 屬性便可：

<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template>

如今，每次切換時，輸入框都將被從新渲染。請看：

Username 

Toggle login type

注意，<label> 元素仍然會被高效地複用，由於它們沒有添加 key 屬性。