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>
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 中定义的响应式引用关联起来。