#key

• 預(yù)期：number | string

key 的特殊 attribute 主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對(duì)比時(shí)辨識(shí) VNodes。如果不使用 key，Vue 會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試就地修改/復(fù)用相同類型元素的算法。而使用 key 時(shí)，它會(huì)基于 key 的變化重新排列元素順序，并且會(huì)移除/銷毀 key 不存在的元素。

有相同父元素的子元素必須有獨(dú)特的 key。重復(fù)的 key 會(huì)造成渲染錯(cuò)誤。

最常見的用例是結(jié)合 v-for：

  <ul>
    <li v-for="item in items" :key="item.id">...</li>
  </ul>

它也可以用于強(qiáng)制替換元素/組件而不是重復(fù)使用它。當(dāng)你遇到如下場(chǎng)景時(shí)它可能會(huì)很有用：

• 完整地觸發(fā)組件的生命周期鉤子
• 觸發(fā)過渡

例如：

  <transition>
    <span :key="text">{{ text }}</span>
  </transition>

當(dāng) text 發(fā)生改變時(shí)，<span> 總是會(huì)被替換而不是被修改，因此會(huì)觸發(fā)過渡。

#ref

• 預(yù)期：string | Function

ref 被用來給元素或子組件注冊(cè)引用信息。引用信息將會(huì)注冊(cè)在父組件的 $refs 對(duì)象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實(shí)例：

  <!-- vm.$refs.p 會(huì)是 DOM 節(jié)點(diǎn) -->
  <p ref="p">hello</p>

  
  <!-- vm.$refs.child 會(huì)是子組件實(shí)例 -->
  <child-component ref="child"></child-component>

  
  <!-- 當(dāng)動(dòng)態(tài)綁定時(shí)，我們可以將ref定義為回調(diào)函數(shù)，顯式地傳遞元素或組件實(shí)例 -->
  <child-component :ref="(el) => child = el"></child-component>

當(dāng) v-for 用于元素或組件的時(shí)候，引用信息將是包含 DOM 節(jié)點(diǎn)或組件實(shí)例的數(shù)組。

關(guān)于 ref 注冊(cè)時(shí)間的重要說明：因?yàn)?ref 本身是作為渲染結(jié)果被創(chuàng)建的，在初始渲染的時(shí)候你不能訪問它們 - 它們還不存在！$refs 也是非響應(yīng)式的，因此你不應(yīng)該試圖用它在模板中做數(shù)據(jù)綁定。

• 參考子組件 Refs

#is

• 預(yù)期：string | Object (component’s options object)

使用動(dòng)態(tài)組件。

例如：

<!-- component changes when currentView changes -->
<component :is="currentView"></component>

更多的使用細(xì)節(jié)，請(qǐng)移步至下面的鏈接。

• 參考
• 動(dòng)態(tài)組件
• DOM 模板解析說明