vue.js的特殊特性

key

• 預期：number | string

  key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。如果不使用 key，Vue 會使用一種最大限度減少動態元素並且儘可能的嘗試修復/再利用相同類型元素的算法。使用 key，它會基於 key 的變化重新排列元素順序，並且會移除 key 不存在的元素。

  有相同父元素的子元素必須有獨特的 key。重複的 key 會造成渲染錯誤。

  最常見的用例是結合 v-for：

  <ul>

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

  </ul>

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

  • 完整地觸發組件的生命週期鉤子
  • 觸發過渡

  例如：

  <transition>

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

  </transition>

  當 text 發生改變時，<span> 會隨時被更新，因此會觸發過渡。

• 源代碼

ref

• 預期：string

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

  <!-- vm.$refs.p will be the DOM node -->

  <p ref="p">hello</p>

  <!-- vm.$refs.child will be the child comp instance -->

  <child-comp ref="child"></child-comp>

  當 v-for 用於元素或組件的時候，引用信息將是包含 DOM 節點或組件實例的數組。

  關於 ref 註冊時間的重要說明：因爲 ref 本身是作爲渲染結果被創建的，在初始渲染的時候你不能訪問它們 - 它們還不存在！$refs 也不是響應式的，因此你不應該試圖用它在模板中做數據綁定。

• 參考：子組件 Refs

• 源代碼

slot

• 預期：string

  用於標記往哪個具名插槽中插入子組件內容。

  詳細用法，請參考下面指南部分的鏈接。

• 參考：具名插槽

• 源代碼

slot-scope

• 預期：function argument expression

• 用法：

  用於將元素或組件表示爲作用域插槽。特性的值應該是可以出現在函數簽名的參數位置的合法的 JavaScript 表達式。這意味着在支持的環境中，你還可以在表達式中使用 ES2015 解構。

  此屬性不支持動態綁定。

• 參考：Scoped Slots

• 源代碼

is

• 預期：string

  用於動態組件且基於 DOM 內模板的限制來工作。

  示例：

  <!-- component changes when currentView changes -->

  <component v-bind:is="currentView"></component>

  <!-- necessary because `<my-row>` would be invalid inside -->

  <!-- a `<table>` element and so would be hoisted out -->

  <table>

  <tr is="my-row"></tr>

  </table>

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

• See also：

  • 動態組件
  • DOM 模板解析說明
• 源代碼