VUE 3.0

六大亮点

性能更快

体积更小

组合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中用生命周期，获取页面中元素

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 项目管理打包工具