內建特殊屬性

key

key特殊屬性主要用作Vue虛擬DOM演算法的提示，用於在比較新舊節點列表時識別vnodes。

期望： number | string | symbol
詳細資訊
沒有key時，Vue使用一個演算法來最小化元素移動，並儘可能在原地修補/重用相同型別的元素。有key時，它將根據key的順序變化重新排列元素，並且不再存在的key對應的元素總是會刪除/銷燬。
相同共同父元素的子元素必須具有唯一的key。重複的key會導致渲染錯誤。
最常見的用法是與v-for結合使用
template
```
<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>
```
它還可以用來強制替換元素/元件而不是重用它。當你想要
- 正確觸發元件的生命週期鉤子
- 觸發過渡效果
例如
template
```
<transition>
  <span :key="text">{{ text }}</span>
</transition>
```
當text改變時，<span>將總是被替換而不是修補，因此會觸發過渡效果。
另請參閱： 指南 - 列表渲染 - 使用key維護狀態

期望： string | Function
詳細資訊
ref用於註冊對元素或子元件的引用。
在Options API中，該引用將註冊在元件的this.$refs物件下
template
```

<p ref="p">hello</p>
```
在Composition API中，引用將儲存在具有匹配名稱的ref中
vue
```
<script setup>
import { useTemplateRef } from 'vue'

const pRef = useTemplateRef('p')
</script>

<template>
  <p ref="p">hello</p>
</template>
```
如果用在普通DOM元素上，引用將是該元素；如果用在子元件上，引用將是子元件例項。
或者ref可以接受一個函式值，該值提供了對儲存引用的完全控制
template
```
<ChildComponent :ref="(el) => child = el" />
```
關於ref註冊時間的重要說明：因為refs是作為渲染函式的結果建立的，所以你必須等待元件掛載後才能訪問它們。
this.$refs也是非響應式的，因此你不應該嘗試在模板中使用它進行資料繫結。
另請參閱

用於繫結動態元件。

期望型別： string | Component
原生元素上的用法
- 僅支援在3.1及以上版本
當在原生HTML元素上使用is屬性時，它將被解釋為自定義內建元素，這是一個原生網路平臺特性。
然而，存在一種情況，你可能需要Vue替換原生元素為Vue元件，如DOM模板解析注意事項中所述。你可以使用vue:字首來指定is屬性的值，這樣Vue將渲染該元素為Vue元件。
template
```
<table>
  <tr is="vue:my-row-component"></tr>
</table>
```
另請參閱
- 內建特殊元素 - <component>
- 動態元件