在 Vue 3 中，refs 的用法与 Vue 2 相比有了一些改进，但基本概念仍然相同：通过 ref 来引用模板中的元素或组件实例，然后在组件的方法或生命周期钩子中通过 this.$refs 来访问这些引用。

然而，在 Vue 3 的 Composition API 中，我们更倾向于使用 ref 函数来创建响应式引用，而不是使用 this.$refs。这种方式使代码更加灵活，并且更易于在组合式函数中使用。

下面我将分别展示 Vue 3 中 Options API 和 Composition API 的 refs 写法。

使用 Options API 选项式

在 Options API 中，refs 的使用与 Vue 2 类似：

<template> <div ref="myDiv">Hello, Vue 3!</div> <button ref="myButton" @click="handleClick">Click me</button></template><script>export default { mounted() { // 通过 this.$refs 访问元素 const myDiv = this.$refs.myDiv; const myButton = this.$refs.myButton; console.log(myDiv); // 输出 div DOM 元素 console.log(myButton); // 输出 button DOM 元素 }, methods: { handleClick() { const myButton = this.$refs.myButton; // 在这里可以对 myButton 进行操作 } }}</script>

使用 Composition API 组合式

在 Composition API 中，你会使用 ref 函数来创建响应式引用，并在 setup 函数中访问它们：

<template> <div ref="myDiv">Hello, Vue 3!</div> <button @click="handleClick">Click me</button></template><script>import { ref, onMounted } from 'vue';export default { setup() { // 使用 ref 函数创建响应式引用 const myDiv = ref(null); // 生命周期钩子在 Composition API 中通过函数实现 onMounted(() => { console.log(myDiv.value); // 输出 div DOM 元素 }); // 方法也作为函数返回 const handleClick = () => { console.log(myDiv.value); // 输出 div DOM 元素 // 在这里可以对 myDiv.value 进行操作 }; // 返回需要在模板中使用的响应式引用和方法 return { myDiv, handleClick }; }}</script>

在 Composition API 的例子中，我们使用了 ref 函数来创建一个响应式引用 myDiv，并将其绑定到模板中的 div 元素上。在 setup 函数中，我们可以直接访问 myDiv.value 来获取对应的 DOM 元素。注意，由于 ref 创建的是一个包装对象，因此我们需要通过 .value 来访问或修改其值。

onMounted 是 Vue 3 的 Composition API 提供的一个生命周期钩子，它等价于 Options API 中的 mounted 钩子。在 onMounted 中，我们可以安全地访问 DOM 元素，因为此时组件已经被挂载到 DOM 中了。

最后，setup 函数返回一个对象，其中包含了需要在模板中使用的响应式引用和方法。这样，模板中的 ref 就可以与 setup 中定义的响应式引用关联起来。