vue3 ref是干啥的

Vue3中的ref是用来获取组件或DOM元素的引用的。与Vue2不同的是，在Vue3中，ref不再是一个对象，而是一个函数，可以通过调用该函数来获取组件或DOM元素的引用。具体来说，当在组件或DOM元素上添加ref属性时，该属性的值会被传递给setup函数中的第二个参数，从而可以通过该参数来获取组件或DOM元素的引用。

以下是一个示例代码，演示了如何在Vue3中使用ref来获取组件或DOM元素的引用：

<template>
  <div>
    <p ref="myParagraph">Hello World!</p>
    <MyComponent ref="myComponent"></MyComponent>
  </div>
</template>

<script>
import { ref } from 'vue';
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  setup() {
    const myParagraph = ref(null);
    const myComponent = ref(null);

    // 在mounted钩子函数中获取组件或DOM元素的引用
    const mounted = () => {
      console.log(myParagraph.value); // 输出：p元素的DOM对象
      console.log(myComponent.value); // 输出：MyComponent组件实例
    };

    return {
      myParagraph,
      myComponent,
      mounted
    };
  }
};
</script>