vue3中的ref标签属性怎么用

在 Vue 3 中，ref 是一个新的响应式 API，用于在模板中访问 DOM 元素、组件实例、或任意其他变量。

在模板中使用 ref，需要使用 `v-bind` 指令来绑定 ref 标签属性。例如，如果要在模板中访问一个 DOM 元素，可以这样写：

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

这里，我们使用 ref 标签属性给 `<p>` 标签起了一个名字叫做 "myParagraph"。现在，我们可以在组件中引用这个 DOM 元素，例如：

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const myParagraph = ref(null);

    onMounted(() => {
      console.log(myParagraph.value);
    });

    return {
      myParagraph
    };
  }
};
</script>

在这个例子中，我们使用 `ref(null)` 创建了一个 ref 对象，并把它赋值给了变量 `myParagraph`。在 `onMounted` 钩子函数中，我们可以使用 `myParagraph.value` 来引用这个 DOM 元素。

除了 DOM 元素，ref 还可以用于组件实例或其他值类型。例如，可以这样定义一个 ref 变量，来引用一个字符串：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello World');

    return {
      message
    };
  }
};
</script>

在这个例子中，我们使用 `ref('Hello World')` 创建了一个 ref 对象，并把它赋值给了变量 `message`。在模板中，我们可以使用 `{{ message }}` 来显示这个字符串。