vue3 ref全家桶

Vue 3中的`ref`全家桶是一组用于响应式数据处理的工具。它们包括`ref`、`reactive`、`toRefs`和`computed`。

1. `ref`：`ref`函数用于创建一个响应式的数据引用。它接收一个初始值作为参数，并返回一个包含该值的响应式对象。可以通过`.value`属性访问和修改该值。

示例代码：

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 输出：0

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

2. `reactive`：`reactive`函数用于创建一个响应式的对象。它接收一个普通对象作为参数，并返回一个包含该对象的响应式代理对象。可以直接访问和修改代理对象的属性，修改后会自动触发视图更新。

示例代码：

import { reactive } from 'vue';

const state = reactive({
  name: 'Vue',
  version: '3.0',
});
console.log(state.name); // 输出：Vue

state.version = '3.2'; // 修改属性
console.log(state.version); // 输出：3.2

3. `toRefs`：`toRefs`函数用于将一个响应式对象转换为普通对象，其中每个属性都是一个独立的响应式引用。这样做的好处是可以在解构对象时保持响应式。

示例代码：

import { reactive, toRefs } from 'vue';

const state = reactive({
  name: 'Vue',
  version: '3.0',
});

const refs = toRefs(state);
console.log(refs.name.value); // 输出：Vue
console.log(refs.version.value); // 输出：3.0

4. `computed`：`computed`函数用于创建一个计算属性。它接收一个计算函数作为参数，并返回一个响应式的计算属性。计算属性的值会根据依赖的响应式数据自动更新。

示例代码：

import { ref, computed } from 'vue';

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

console.log(doubleCount.value); // 输出：0

count.value = 5; // 修改依赖的响应式数据
console.log(doubleCount.value); // 输出：10

这些工具可以帮助我们更方便地处理响应式数据，提高开发效率。