Vue3 特殊属性：key,ref,is

Vue3 特殊属性：key,ref,is

参考文档：https://v3.vuejs.org/api/special-attributes.html

vue3 特殊属性：

• key
• ref
• is

key

期望值：number | string

特殊属性key主要用于提示Vue的虚拟DOM算法在区分新节点列表和旧节点列表时识别VNodes。没有key的时候，Vue使用一种算法来最小化元素移动，并尽可能就地修补/重用相同类型的元素。使用key，它将根据键的顺序变化对元素重新排序，而key不再存在的元素将总是被删除/销毁。

同一公共父元素的子元素必须具有唯一的key，重复的key会导致渲染错误。

最常用的使用示例是和v-for一起使用。

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

它还可以用于强制替换元素/组件，而不是重用它。当你想要的时候，这很有用：

• 恰当地触发组件的生命周期钩子
• 触发transitions

示例：

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

当text改变，span将始终被替换，而不是修补，因此将触发transition

ref

期望值：string | Function

ref用于注册对元素或子元素的引用。引用将注册在父组件的$refs对象下。如果在普通DOM元素上使用，引用将是该元素，如果在子组件上使用，引用将是组件实例

<!-- vm.$refs.p 就是这个DOM节点 -->
<p ref="p">hello</p>

<!-- vm.$refs.child 就是child-component这个组件实例 -->
<child-component ref="child"></child-component>

<!-- 当动态绑定，我们可以将ref定义为一个回调函数，显示地传递元素或组件实例 -->
<child-component :ref="(el) => child = el"></child-component>

关于ref注册时间的一个重要提示：

因为ref本身是由render函数创建的，所以你不能在初始渲染时访问它们——它们还不存在！

$refs也是非响应式的，因此不应该尝试在数据绑定模板中使用它。

refs相关补充：

Template refs

尽管存在props和events，但有时您可能仍然需要在JavaScript中直接访问子组件，要实现这一点，可以使用ref属性作为子组件或HTML元素分配一个引用ID

<input ref="input" />

当你想以编程方式将这个输入焦点放到组件挂载上，这可能是有用的。

const app = Vue.createApp({})

app.component('base-input', {
    template: `
        <input ref="input" />
    `,
    methods: {
        focusInput() {
            this.$refs.input.focus()
        }
    },
    mounted() {
        this.focusInput()
    }
})

此外，你可以添加另一个ref到组件本身，并使用它来触发来自父组件的focusInput事件

<base-input ref="usernameInput"></base-input>

this.$refs.usernameInput.focusInput()

$refs只在组件呈现后填充，它只是作为直接操作子组件的口子——应该避免从模板或计算属性中访问$refs

is

期望值：string | Object(组件选项对象)

用于动态组件

例如：

<!-- 当currentView变化时，component改变 -->
<component :is="currentView"></component>