Vue3 内置属性

模板里有一批以普通 HTML 属性形式存在、却由 Vue 解释的特殊属性：key、ref、is。它们不需要 v- 前缀，却分别控制着列表渲染、DOM 引用与动态组件等关键行为，理解它们是进阶使用模板的必经之路。

key：唯一标识

v-for 渲染列表时，应给每项绑定唯一的 key：

<ul>
  <li v-for="user in users" :key="user.id">
    {{ user.name }}（{{ user.age }} 岁）
  </li>
</ul>

key 建议使用数据自带的 id，而不是下标。有了稳定的 key，Vue 才能精确地复用和移动 DOM 节点，避免渲染错乱并提升 diff 性能。

给组件更换不同的 key 还会强制它重新创建，常用于重置表单：

<edit-form :key="userId" :user="currentUser" />

当 userId 变化时，edit-form 会销毁重建，内部状态随之清空。

ref：引用 DOM 或组件

ref 用来拿到真实的元素节点或子组件实例：

<script setup>
import { ref, onMounted } from 'vue'

const inputEl = ref(null)              // 变量名需与模板 ref 一致

onMounted(() => {
  inputEl.value.focus()                // 挂载后让输入框获得焦点
})
</script>

<template>
  <input ref="inputEl" placeholder="请输入内容" />
</template>

页面加载后输入框自动聚焦，证明拿到了真实 DOM。若 ref 用在 v-for 中，得到的会是一个元素数组。

is：动态组件

is 决定标签实际渲染成哪个组件，最常用于配合 component 做动态切换：

<script setup>
import HomePage from './HomePage.vue'
import AboutPage from './AboutPage.vue'

const current = HomePage   // 切换 current 即可换页
</script>

<template>
  <component :is="current" />
</template>

current 可以是组件对象、注册名或 import 的组件。

在 index.html 这类「DOM 内模板」中直接写原生标签时，浏览器会把未知标签移出 table 等容器，此时需带上 vue: 前缀提示 Vue 接管：

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

小结

key 管复用、ref 管引用、is 管动态渲染。三个内置属性都不起眼，却常常是列表性能、DOM 操作与组件切换问题的答案所在。