六大亮点
性能更快
体积更小
组合API
更好支持ts
自定义渲染AIP
更先进组建
性能：
-diff 算法优化
只比较有静态标记的标签
-hoistStatic 静态提升
不需要参与更新的元素，只渲染一次
-catchHandlers 事件侦听缓存
onClick 不会被动态监听
组合API
解决数据与业务逻辑分散的问题
import {ref} from 'VUE' //只能监听简单对象
import {reactive} from 'VUE'
setup(){
let state = reactive({
stus:[]
})
function remFun(){}
return {state,remFun}
}
Composition API 和 Option API 混合使用
CompositionAPI 本质（组合API、注入API）
setup执行时机：
beforeCreate : 组建刚被创建好，data 和method 还没有初始化好
setup 无法使用data和methods, setup函数中的this是undefine, 不能是异步的
Created
什么是reactive？
实现响应式数据的方法
import reactive from 'vue'
创建响应式数据的时候需要传入对象（JSON、arr）日期等其他对像不能响应在页面，要重新赋值。
ref
实现响应式数据，监听简单值。
本质是reactive，ref(18)-> reactive({value:18})
通过ref创建的数据在template中使用不需要数据.valule
非递归监听
shallowReactive\shallowRef (只有在监听的数据量比较大的时候用非递归监听)
triggerRef
shallowRef -> shallwoReactive
通过shallowRef 创建的值监听的是.vlaue的变化，
toRaw 从reactive,ref中的得到原始数据
数据默认不是响应式
let obj={name:'999',age:'88'}
let state = reactive(obj) //state的本质是一个Proxy对象，引用了obj
// 如果直接修改obj 无法触发页面更新
let obj2= toRaw(state)
//当一些操作不需要追踪的时候，通过ToRaw方法拿到他的原始数据，对原始数据进行修改，提示性能。
// 如果想通过toRow拿到ref类型的原始数据，要告诉toRaw方法获取的是.value的值，
markRaw
让数据无法被追踪
toRef
如果利用ref将对象某一对象的某一属性变成响应式数据，，我们修改响应式的数据是不会影响到原始数据。
如果利用toRef 将对象的属性变成响应式数据，我们修改响应式数据会影响到原始数据，但是UI界面不变化。
ref :复制，不会影响以前数据，界面会自动更新
toRef:引用，修改响应数据会影响以前数据，界面不会自动更新；应用场景：响应式数据与以前数据关联起来，并且更新响应式数据不影响UI时使用。
toRefs
接收的参数是个对象
customRef
获取元素
在组合API中用生命周期，获取页面中元素
<div ref='box'>
import{ref, onMounted} from 'vue'
setup(){let box = ref(null);
onMounted(()=>{
console.log(box.value)
})
return{box}
}
readonly
创建只读数据，递归只读，不能给属性重新赋值。
shallowReadolny ,非递归只读
isReadonly
const 创建只读数据，赋值保护，不能给变量重新赋值
VUE3 响应式数据本质
创建V3
Webpack
Vue-CLI
Vite 项目管理打包工具
