vue3的refs用法

前言：

Vue 3的Refs是一种新的API，用于访问DOM元素或组件实例。Refs提供了一个简单的方法来访问DOM元素或组件实例，以便在Vue组件中进行操作和处理。在Vue3中，refs用于获取组件或DOM元素的引用，类似于Vue2中的$refs。但与Vue2不同的是，在Vue3中，refs可以是一个字符串或一个函数。

当refs是一个字符串时，在渲染时会将其关联到相应的元素或组件上，然后可以使用.value来访问它们：

1. <template>
2.     <div>
3.         <input ref="inputRef" />
4.         <button @click="handleClick">Click mebutton>
5.     div>
6. template>
7. <script>
9. import { ref } from'vue';
10. export default {
11. setup() {
12. const inputRef = ref(null);
13. const handleClick = () => {
14. inputRef.value.focus();
15. };
16. return {
17. inputRef,
18. handleClick,
19. };
20. },
21. };
22. script>

当refs是一个函数时，在渲染时会将其传递给组件的setup()函数，并且每当组件重新渲染时都会调用该函数。这使得我们可以动态地创建和更新引用：

1. <template>
2.     <div>
3.         <MyComponent :ref="refHandler" />
4.     div>
5. template>
6. <script>
7. import { ref, onMounted } from 'vue';
8. import MyComponent from './MyComponent.vue';
10. export default {
11. components: {
12. MyComponent,
13. },
14. setup() {
15. const refHandler = (el) => {
16. console.log(el); // 打印组件实例或DOM元素
17. };
18.     onMounted(() => {
19. console.log(refHandler.value);
20. });
21. return {
22. refHandler,
23. };
24. },
25. };
26. script>

我们使用onMounted生命周期函数，在组件挂载时访问了myRef引用。由于myRef引用与我们的元素相关联，myRef.value将是这个元素的实际DOM元素。我们可以使用这个元素来执行任何我们需要的操作

需要注意的是，当使用函数ref时，如果组件没有被渲染或者已经被销毁，那么被传递给ref的回调函数参数将为null。