reactive、ref和toRef、toRefs区别
1. reactive 用于为对象添加响应式状态。接收一个js对象作为参数，返回一个具有响应式状态的副本。
- 获取数据值的时候直接获取，不需要加
.value - 参数只能传入对象类型 2. ref 用于为数据添加响应式状态。由于reactive只能传入对象类型的参数，而对于基本数据类型要添加响应式状态就只能用ref了，同样返回一个具有响应式状态的副本。
- 获取数据值的时候需要加
.value。(对于基本数据类型，ref是自己的实现方式且性能优于reactive，而对于对象类型，ref仍然是通过reactive包装实现的) - 参数可以传递任意数据类型，传递对象类型时也能保持深度响应式，所以适用性更广。
- vue 3.0
setup里定义数据时推荐优先使用ref，方便逻辑拆分和业务解耦。 3. toRef 用于为源响应式对象上的属性新建一个ref，从而保持对其源对象属性的响应式连接。接收两个参数：源响应式对象和属性名，返回一个ref数据。 - 获取数据值的时候需要加
.value - toRef后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据。 4. toRefs 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref。常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用toRefs可以方便解决这一问题。
- 获取数据值的时候需要加
.value toRefs后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据- 作用其实和
toRef类似，只不过toRef是一个个手动赋值，而toRefs是自动赋值。
Teleport(传送门)
- 可以在任意地方使用插入指定位置
to插入在指定的id节点下
Suspense(异步组件)
- 使用
<Suspense></Suspense>包裹所有异步组件相关代码 <Suspense></Suspense>下<template #default></template>插槽包裹异步组件<Suspense></Suspense>下<template #fallback></template>插槽包裹渲染异步组件之前的内容
