携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，点击查看活动详情
组合式 API
在 Vue进阶 | Vue3新特性之组合式API（一） 中我们了解了组合式 API 可以提高代码的复用性与可读性，使项目更易维护，其中包括：
- 响应式 API： 比如
ref()和reactive() - 生命周期钩子： 比如
onMounted()和onUnmounted()，具体可参考：Vue进阶 | Vue3的生命周期 - 依赖注入：比如
provide()和inject() - 父子组件之间的交互：
defineProps和defineEmits、defineExpose - ...
在组合式 API 中我们使用 ref() 创建基础类型数据，使用 reactive() 创建对象，它们的目的都是为了创建响应式。但是，reactive 对象取出的所有属性值都不是响应式的，这就需要在进行一步解构的的操作。
toRef与 toRefs
toRef()与toRefs()都是用来解构响应性对象中的属性的，并且让解构后的属性保留响应式（最终都会转换成ref）- toRef: 复制 reactive 里的单个属性并转成 ref
- toRefs: 复制 reactive 里的所有属性并转成 ref
- 它们都是引用值，修改数据的值会影响原始数据
实现方式
一个对象中包含的属性，在 setup 中使用[对象名.属性名]的形式访问和操作，而 Vue2 中更新对象的属性需要使用vue.$set。
const num = ref(0);
const fruit = reactive({
type: 'banana',
price: 3.14
})
const setFruit = () => {
fruit.type = 'apple';
num.value ++; // 划重点，这里很容易忘记写 value
}
// 复制所有并解构
const { type } = toRefs(person)
// 复制单个并解构
let price = toRef(fruit, 'price')
解构出来的 type 、price 字段是响应式的，就可以直接在 <template> 里面直接使用了~
检查是否是响应式
语法：isRef()
功能：检查指定值是否为一个 ref 对象
const { ref, isRef } = Vue
const msg = ref("俺是响应式数据")
console.log(isRef(msg))
总结
toRef()与toRefs()用来解构响应性对象中的属性，解构后的属性也是响应式的。- Vue2对象新增属性是基于 Object.definePropety ，无法直接监听属性值变化，需要通过
Vue.$set方法才能被监听到。 - Vue3 中基于 Proxy 实现响应式，普通数据使用 ref() 实现响应式，对象通过 reactive() + toRef() / toRefs()实现。
