vue3中的ref属性是用来干什么的

在 Vue 3 中，ref 的概念变得更加灵活，因为它不再仅限于模板中的 DOM 元素或组件引用。Vue 3 引入了 Composition API，其中包括一个名为 ref 的函数，它允许你在 JavaScript 中创建响应式引用。

以下是 Vue 3 中 ref 的两种主要用途：

1. 模板中的 ref 属性

与 Vue 2 类似，Vue 3 中的模板仍然可以使用 ref 属性来注册对 DOM 元素或子组件的引用。不过，在 Vue 3 的组合式 API 中，你可能更多地会使用 setup() 函数中的 ref 函数来创建响应式数据，并在模板中使用这些数据。

在模板中设置 ref 的示例：

<template>  
  <div>  
    <input ref="inputRef" type="text" />  
    <button @click="focusInput">Focus Input</button>  
  </div>  
</template>  
  
<script>  
export default {  
  mounted() {  
    // 访问 DOM 元素  
    this.$refs.inputRef.focus();  
  },  
  methods: {  
    focusInput() {  
      this.$refs.inputRef.focus();  
    }  
  }  
};  
</script>

注意，在 Vue 3 的组合式 API 中，你通常会使用 setup() 函数和 ref 函数来创建响应式数据，而不是直接在 data 函数中定义。

1. Composition API 中的 ref 函数

在 Vue 3 的 Composition API 中，ref 是一个函数，用于创建一个响应式引用。这个引用包含一个值，并且当这个值改变时，视图会自动更新。

使用 ref 在 setup() 函数中的示例：

<template>  
  <div>  
    <input v-model="count.value" type="number" />  
    <p>Count: {{ count.value }}</p>  
  </div>  
</template>  
  
<script>  
import { ref } from 'vue';  
  
export default {  
  setup() {  
    const count = ref(0);  
  
    // 你可以在这里定义其他逻辑，例如方法、计算属性等  
  
    return {  
      count // 暴露给模板  
    };  
  }  
};  
</script>

在这个示例中，count 是一个响应式引用，它包含一个初始值为 0 的值。你可以通过 count.value 来访问或修改这个值，并且当这个值改变时，视图会自动更新。

总结来说，Vue 3 中的 ref 可以用于模板中以注册对 DOM 元素或子组件的引用，也可以用于 Composition API 中以创建响应式引用。这两种用法在 Vue 3 中都是非常重要的。