vue3 组件使用ref 干什么

在Vue 3中，ref是一个函数，用于创建一个响应式的引用对象。ref可以用来包装普通的JavaScript值，使其成为响应式的。通过ref创建的引用对象可以在模板中直接使用，并且当引用对象的值发生变化时，相关的组件会自动重新渲染。

使用ref可以实现以下功能：
1. 创建响应式数据：通过将普通的JavaScript值包装在ref函数中，可以将其转换为响应式数据。这样，在组件中使用这个ref对象时，当其值发生变化时，组件会自动更新。
2. 访问和修改数据：通过ref对象的.value属性，可以访问和修改引用对象所包装的值。在模板中使用ref对象时，可以直接使用对象名而无需使用.value。
3. 在模板中使用：在模板中使用ref对象时，可以直接使用对象名而无需使用.value。Vue会自动处理引用对象的值的变化，并进行相应的更新。

示例代码如下：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};
</script>