1.vue3的优点：
-
Compoosition Api 的高灵活性 可以更好的制定模块化代码
-
不需要用this来深度调用了，摆脱this的强耦合，更好的防止丢失响应式
-
vue2的mixin也是抽离模块化代码的一种方式，但是minxin局限性比较多 property 都被合并到同一个组件中可能会命名冲突，且能向 mixin 传递任何参数来改变它的逻辑，这降低了它们在抽象逻辑方面的灵活性。
-
vue3中不需要允许多个根节点 这称为 Fragment
-
Vue3中会对模版进行静态分析 对不会改变的部分进行预编译 避免每次渲染时重复创建，提升渲染效率
2.vue3的基础语法：
- ref 和 reactive --创建响应式数据 前者需要使用 .value 获取值和修改值，后者是创建一个响应式对象（个人喜好ref一把梭）
- setup 函数 是组件的入口点 在组件实例创建和初始化之后 但是在渲染发生之前被调用 。类似beforeCreate。我们一般使用setup语法糖形式
- watch 和 computed 改成函数调用的形式了。配置项可百度查询
- props 数据 如果需要解构需要包裹 toRefs 或者 toRef 否则会丢失响应式(在3.5版本已经不需要了)
watch(count,(newValue,oldValue)=>{...})
-----------------------
let sum=computed(()=>count*2)
- 生命周期钩子也可以通过导入的方式获取
- 创建浅层响应式 shallowReactive,shallowRef 只会创建第一层响应式
- readonly 创建一个只读的响应式对象，不可修改
- 自定义ref 允许你自定义创建一个响应式引用，方便控制和观察当前引用值发生变化的行为
//自定义ref
const count=customRef((track,trigger)=>{
let a=0
return {
get(){
track()
return a
},
set(newValue){
value=newValue
trigger()
}
}
})
- toRefs和toRef 函数 可以帮助我们添加响应式
- teleport 组件标签 可以允许我们将内部元素插入到任意dom位置，而不是仅仅在当前父组件中
<teleport to="#id">
<div>123</div>
</teleport>
- Suspense 异步组件 允许我们在等待异步组件渲染完成的时候显示一些其他内容
<Suspense>
//完成的话显示默认组件
<template #default>
<AsyncComponents></AsyncComponents>
</template>
//没完成显示loding备用内容
<template #fallback>
<div>Loading.....</div>
</template>
</Suspense>
- 动态组件 通过 component 标签 配合 is属性来判断显示哪个组件
- defineAsyncComponent 异步组件 一般用于 循环生成components 或者是SSR服务端渲染会用到
- toRaw 和 markRaw 防止被转换成响应式数据
- provide,inject 用于爷孙组件通信
- isReactive 和 isRef 用于判断数据是否是响应式
- 创建全局共享方法/数据：app.config.globalProperties.$myGlobalMethod
3.vue周边生态：
- Pinia 持久化数据管理工具
- VueRouter 路由库
- ElementUI AntdUI 等UI库
- Vitest 单元测试框架
