首先 创建项目 Vue3
Vue3 相较于Vue2 的6大亮点：
1 性能快。 2 按需编译 体积更小 3 提供了组合API 类似于react 的React Hooks 4 更好的Ts支持 5 暴露了自定义渲染的API 6 更先进的组件。
使用Vue3 创建项目 1 webpack 2 Vue-cli 3 vite
什么是vite?
安装vite :
npm install -g create-vite-app
创建Vue3项目：
create-vite-app projectName
安装依赖运行项目：
cd projectName
npm install
npm run dev
组合API:
setup(){
}
函数是组合API的入口函数，通过导入ref实时监听变量的变化。并且通过组合API可以初始化变量的值。 最后通过return 暴露出去对象或者方法。
eg:
首先导入ref:
其次，定义setup()函数：
ref函数的注意点：ref函数只能监听简单类型的变化，不能监听复杂类型的变化 类似于（对象/数组等）
监听复杂类型的变化可以使用reactive函数来实现。
eg:
最后实现的整体的业务逻辑封装之后如下所示：
模块化管理 封装相关的功能函数并导出 之后再App.vue中导入使用：
组合API的本质及其使用：在使用过程中将Compisition API 数据和方法 注入到options API 的数据和方法当中。
setup函数执行时机以及注意点：
setup函数的执行时间，是在beforeCreate钩子执行之前完成的。因此在setup函数中是无法使用data 和methods 的。并且为了避免错误的使用，直接将setup函数中的this修改成了undefined。
setup函数只能是同步的，不能够是异步的。
reactive函数：是Vue3中提供的实现响应式数据的方法。
reactive函数必须传入一个对象（json 或者 array类型的都可以），本质是将传入的数据包装成一个Proxy对象。
如果传递了其他的对象，默认情况下修改对象，界面不会自动更新，如果需要跟新，则需要重新赋值。
ref的深刻理解：
ref 和reactive的区别：
Vue如何判断一个数据是否是ref类型的或者是reactive类型的：
由私有属性无法访问，因此如果要判断一个类型是否是ref类型的或者是reactive类型的 可以通过导入函数isRef isReactive来实现：
递归监听：
由于把每一层包装成一个Proxy对象，因此十分的消耗性能。
非递归监听：只能够监听第一层，不能够监听其他层。创建非递归的监听的数据 (reactive 对应 shallowReactive) , (ref 对应于 shallowRef )
shallowRef使用的注意点：
可以通过triggerRef()方法实现ref 数据的主动的更新页面数据。
shallowRef的本质：
toRaw方法：针对于reactive响应式数据的原始数据。
eg:
toRaw的主要使用特点：保存原始数据，只更新原始数据，并不修改UI界面。
获取ref类型的原始数据的方式：通过toRaw 方法 由于包装成了reactive方法 所以需要使用.value来获取原始的数据。
通过markRaw来实现永远都不会追踪原始数据：
toRef方法：
ref()方法对某一个对象中的属性进行操作：如果将对象中的某一个属性变为响应式数据，修改响应式的数据时不会影响到原始数据的变化。
ref() 和 toRef() 方法的区别和联系：
如果需要将某一个对象中的多个属性变为响应式数据，可以采用toRefs()函数来实现。 只有一个属性变为响应式数据的时候使用toRef()
import {toRefs } from 'vue';
setup(){
let obj = {name:"kkl",age:18};
let state = toRefs(obj);
// 使用toRef()实现属性变为响应式。
// let name = toRef(obj,"name");
// let age = toRef(obj,'age');
function myFun（）{
state.name.value = "zs";
state.age.value = 22;
}
return { state,myFun}
}
可以将对象中的属性全部变为响应式数据。
