Vue3中的refs使用

在 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>exportdefault{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';exportdefault{setup(){// 使用 ref 函数创建响应式引用const myDiv =ref(null);// 生命周期钩子在 Composition API 中通过函数实现onMounted(()=>{
      console.log(myDiv.value);// 输出 div DOM 元素});// 方法也作为函数返回consthandleClick=()=>{
      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 中定义的响应式引用关联起来。