vue3.0新增特性
性能比Vue2.x快1.2倍
加入了按需导入按需编译，体积相比Vue2.X变小
组合API
更好的TypeScript支持
暴露了自定义渲染的API
更先进的组件
dif算法
相比vue2的diff算法全层比较更新视图，vue3会在创建DOM树的内容会不会发生变化，添加一个静态标记当数据更新时生成新的虚拟DOM，对有静态标记的地方进行更新
静态提升和缓存机制
静态提升
对比vue2vue3会复用已有的元素，哪里需要哪里调用，不需要参与更新的元素放到外面，只创建一次，在渲染时直接复用即可
事件帧听器缓存
默认情况下onClick会被视为动态绑定，所以每次都会去追踪他的变化，但是应为是同一个函数，所以没有追踪变化，直接缓存起来复用即可
Vue3.0项目创建
创建方式 1-Vue-Cli，2-Wenpack,3-Vite(Vue新增，Vite是作者开发的一款意图取代webpack的工具，其实现原理就是利用ES6的import会去发送加载请求文件的特性，拦截这些请求，做一些预编译)
安装Vite npm install -g create-vite-app
组合API
提供了setup函数，setup函数是组合API的入口函数，在此函数中定义变量需要通过import引入import {ref} from 'vue'在申明变量时let a = ref(0)当变量发送改变时，Vue会自动更新UI(ref函数注意点ref函数只能监听简单的数据类型变化，不能监听复杂的数据类型变化（对象/数组）),如果想监听复杂数据类型Vue3.0提供了一个import {reacive} from ‘Vue’的方法
在组合API中，如果想定义方法，不用到methods中，直接在setup中定义即可
注意：在组合API中定义变量或者方法，要想在外界使用，必须通过return{xxx,xxxx}的方式暴露出去
组合API就是将我们封装好的具备独立共用的函数组合在一起就是组合API
sutup函数执行时机和注意点
setup执行时机 beforeCreate > setup > Create
在执行setup函数时还没有执行Createed生命周期函数，所以在setup中无法使用data和methods的，Vue为了避免错误使用，它直接将setup函数中的this修改成了undefined，setup函数只能是同步，不可以是异步
reactive
reactive是Vue3中提供的实现响应式数据的方法，Vue3中的响应式数据是通过ES6的Proxy来实现的
reactive参数必须是对象（json/arr）如果reactive传递了其他对象，默认情况下修改对象，界面不会自动更新，如果想更新，可以通过重新赋值的方式
ref
ref和reactive一样，也是用来实现响应式数据的方法，但是reactive必须传递一个对象，所以在企业开发中如果我们想让某个变量实现响应式的时候会非常麻烦，所以Vue3 就提供了ref方法，实现对简单数据的监听
ref的本质其实还是reactive，系统会自动更具我们给ref传入的值将他装换成reactive（{value：xx}）
ref 注意点：在Vue中使用ref的值不用通过Value来获取，在JS中使用ref的值必须通过Value来获取
ref和reactive的区别
如果在template中使用的是ref的数据类型，那么Vue会自动帮我们添加.value
如果在template中使用的是reactive类型的数据，那么Vue不会自动帮我们添加.value
递归监听
默认情况下，无论是ref还是reactive都是递归监听
递归监听存在的问题，如果数据量比较大，非常消耗性能
非递归监听 shallowRef/shallowReactive
如何触发：如果是shallowRef数据类型，可以通过triggerRef来触发
应用场景：只有在需要监听的数据量较大时，我们才使用shallowRef/shallowReactive
to-Raw
ref/reactive数据类型特点：每次修改都会被追踪，都会更新UI界面，但是非常消耗性能，所以当我们有一些操作不需要追踪，不需要更新UI界面那么这个时候，我们就可以通过toRaw方法拿到他的原始数据，对原始数据进行修改这样就不会被追踪，这样就不会更新UI界面，提高性能
如果想通过toRaw拿到ref类型的原始数据（创建时传入的那个数据）那么就必须明确的告诉toRaw方法，要获取的是.value值，应为经过Vue处理之后,.value中保存的才是传入的的那个原始数据
toRaf
如果利用toRaf将某一个对象中的属性变成响应式的数据，我们修改响应式的数据是会影响到原始数据的，但是如果响应式的数据是通过toref创建的，那么修改了数据并不会触发UI界面的更新
