Vue 3.0 特殊指令

#key

• 預(yù)期：number | string

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

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

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

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

它也可以用于強制替換元素/組件而不是重復(fù)使用它。當你遇到如下場景時它可能會很有用：

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

例如：

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

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

#ref

• 預(yù)期：string | Function

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

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

  
  <!-- vm.$refs.child 會是子組件實例 -->
  <child-component ref="child"></child-component>

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

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

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

• 參考子組件 Refs

#is

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

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

例如：

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

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

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