内置特殊属性

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>
- 动态组件