$refs

$refs 是一个魔术属性，用于获取组件内标记了 x-ref 的 DOM 元素。当你需要手动操作 DOM 元素时，这非常有用。它通常作为 document.querySelector 的更简洁、更具作用域限制的替代方案。

<button @click="$refs.text.remove()">Remove Text</button>

<span x-ref="text">Hello 👋</span>

Remove Text

Hello 👋

现在，当 <button> 被按下时，<span> 将被移除。

限制

在 V2 中，可以将 $refs 动态绑定到元素，如下所示：

<template x-for="item in items" :key="item.id" >
    <div :x-ref="item.name">
    some content ...
    </div>
</template>

然而，在 V3 中，$refs 只能访问静态创建的元素。因此对于上面的示例：如果你期望 $refs 中的 item.name 的值为 Batteries，你需要注意 $refs 实际上包含的是字面字符串 'item.name'，而不是 Batteries。