Vue 中 toRefs() 和 toRef() 的使用方法

import { toRefs } from 'vue';

const state = reactive({
    count: 0,
    message: 'Hello, Vue 3!'
});
// toRefs() 接受一个响应式对象，并返回一个新的对象，
// 其中包含原始响应式对象的所有属性，这些属性都是 refs。
// 这使得在组件中使用时，保持这些属性的响应性。
const refs = toRefs(state);
console.log(refs.count.value); // 0
refs.count.value++; // 修改属性
console.log(refs.count.value); // 1

const { count, message } = toRefs(state);
// 可以使用 count 和 message，它们都是响应式的
// 转换成 ref 之后需要使用 .value
count.value++; // 正确，count 仍然是响应式的
// 若直接像下面这种直接解构，则会失去响应性
const { count, message } = state; // 这种方式会失去响应性
count++; // 这样修改不会触发视图更新
 

import { toRef } from 'vue';

const state = reactive({
    count: 0,
    message: 'Hello, Vue 3!'
});
// state 对象，和 count属性
// 只将 count 转换为 ref
const countRef = toRef(state, 'count');

// 使用 toRef 创建的响应式引用就需要
// 通过 .value 访问和修改其值
console.log(countRef.value); // 0
countRef.value++; // 修改属性
console.log(countRef.value); // 1