Vue3中的ref函数

在 Vue 3 中，ref 是一个用于创建响应式引用（reference）的函数，它是 Composition API 的一部分。ref 函数主要用于处理基本数据类型（如数字、字符串、布尔值等），返回一个响应式的引用对象。以下是 ref 函数的一些关键特性：

基本用法

import { ref } from 'vue';

const count = ref(0); // 创建一个响应式的数字引用

在这个例子中，count 是一个响应式引用对象，它的 .value 属性初始值为 0。

访问和修改 .value

console.log(count.value); // 输出：0
count.value = 1; // 修改值
console.log(count.value); // 输出：1

通过 count.value 可以访问和修改响应式引用的值。

响应式

由于 ref 创建的是响应式引用，任何对 .value 的修改都会触发组件的重新渲染。

export default {
  template: `<div>{{ count }}</div>`,
  setup() {
    const count = ref(0);
    // 当 count.value 的值改变时，这里绑定的 div 内容也会更新
    return { count };
  }
};

在模板中使用

在 Vue 模板中，可以直接绑定到 ref 的 .value 属性。

<template>
  <div>{{ count }}</div>
</template>

嵌套对象

虽然 ref 主要用于基本数据类型，但也可以用来创建响应式对象的属性。

const person = ref({
  name: 'Alice',
  age: 25
});

person.value.age = 26; // 改变年龄会触发响应式更新

派生状态（Computed properties）

可以结合 computed 使用 ref 来创建基于响应式引用的计算属性。

const doubleCount = computed(() => count.value * 2);

在这个例子中，doubleCount 是一个响应式的计算属性，其值会根据 count.value 的变化自动更新。