本文主要记录在 Composition API （VCA）中使用reactive ref toRef toRefs
在 Vue 3 中，"ref" 和 "reactive" 是用于处理响应式数据的两种不同方式。
ref
"ref" 是 Vue 3 中的一个函数，它用于创建一个响应式引用（reactive reference）来包装基本数据类型（如数字、字符串等）或非响应式对象。"ref" 函数返回一个包装后的响应式对象，可以通过 ".value" 属性来访问和修改其值。当你想要在模板或组件中使用基本数据类型作为响应式数据时，通常会使用 "ref"。
示例
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
console.log(count.value)
count.value++;
};
return {
count,
increment,
};
},
};
</script>注意：在使用ref包装后的对象，如果要在script中使用其值需要返回value，详见像文中increment。但是在template中则可以直接使用。
reactive
"reactive" 是 Vue 3 中的另一个函数，它用于创建一个响应式代理（reactive proxy）来包装普通的 JavaScript 对象。"reactive" 函数返回一个代理后的响应式对象，它会跟踪对象属性的变化，使得当对象属性变化时，能够自动触发相关的更新。
<template>
<div>
<p>{{ }}</p>
<p>{{ person.age }}</p>
<button @click="incrementAge">Increment Age</button>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const person = reactive({
name: 'Alice',
age: 30,
});
const incrementAge = () => {
person.age++;
console.log(person.age)
};
return {
person,
incrementAge,
};
},
};
toRef toRefs
toRef 和 toRefs 是用于在 Composition API 中处理响应式数据的两个函数。
toRef：
toRef 函数用于将响应式对象的某个属性转换为一个单独的 ref。这个 ref 将保持与原始属性的响应式关联，即当原始属性变化时，ref 也会自动更新。toRef 是用于将嵌套属性转换为 ref 的一种方式。
toRefs 函数用于将一个响应式对象的所有属性转换为 ref，并返回一个新的对象，这样可以在解构对象时保持响应式。
<template>
<div>
{{ year }} - {{ month }} - {{ day }}
<p>{{ name }}</p>
<p>{{ age }}</p>
<button @click="incrementAge">Increment Age</button>
</div>
</template>
<script>
import { reactive, toRef, toRefs } from 'vue';
export default {
setup() {
const person = reactive({
name: 'Alice',
age: 30,
});
const date = reactive({
year:'2008',
month:'08',
day:'08'
})
const incrementAge = () => {
person.age++;
console.log(person.age)
};
return {
...toRefs(person),
year:toRef(date,'year'),
month:toRef(date,'month'),
day:toRef(date,'day'),
incrementAge,
};
},
};
</script>这里使用toRefs时使用了"..." ，称为"扩展运算符"（Spread Operator）或"剩余参数"（Rest Parameters），它用于处理数组和对象的展开和合并操作。
