一. VUE2不足
- 对Typescript不支持
- Options API处理把代码逻辑分开了，不易阅读
- 逻辑复用时采用 mixins 方法不够灵活和方便
二. VUE3升级内容
1. 增加对Typescript支持
2. 模版支持多个根结点
3. teleport 传送门
控制teleport嵌套的内容在DOM中哪个父节点下呈现HTML（与react Portals 类似）
4. 组合式API
介绍：
****将同一个逻辑关注点相关代码收集在一起。
setup 基础
- setup 接收参数 props 和 context（{emit,attrs,slots,expose}） 的函数， 不用this；
- setup 返回一个对象（相当于data）props跟该对象property数据都可以在模版访问到
- 在创建组件之前执行
\
响应式
- 使任何响应式变量在任何地方起作用
- 使用：
ref：创建ref引用，使用.value访问或改变值。在模版中不需要.value
reactive：直接引用，直接修改值
值类型用 ref 包裹，引用类型用 reactive 代理
toRef和toRefs
- toRefs：
props不能够用ES6解构，会消除响应式。需要解构props，用toRefs
- toRef：
可选的props，toRef不会创建ref，需要用toRef替代
computed
- 语法改变
- 需要给 computed 函数传递一个参数，它是一个类似 getter 的回调函数，输出的是一个 只读的响应式引用。我们需要像 ref 一样使用 .value。
watch
侦听器数据源可以是一个具有返回值的 getter 函数，也可以直接是一个 ref：
watchEffect
立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。
5.生命周期
6.Provide / Inject
语法更新，跨层级传递数据
7. mixins替换(hooks函数）
mixins缺点：
- mixins 容易冲突：因为每个特性的属性都被合并到同一个组件中，组件内同名的属性或方法会把mixins里的覆盖掉。
- 可重用性有限：我们不能向 mixins 传递任何参数来改变它的逻辑，这降低了它们在抽象逻辑方面的灵活性。
- 数据来源不清晰：组件里所使用的mixins里的数据或方法在当前组件代码里搜索不到，易造成错误的解读，比如被当成错误代码或冗余代码而误删。
替换方法
setup封装函数块，直接引用
\
三. 创建方式变更
Vue CLI， Vite两种方式对比
- Vue CLI v4.5： webpack打包
- Vite：是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动
无需打包，快速的冷服务器启动
即时热模块更换（HMR，热更新）
真正的按需编译
\
main.js变更
四. 数据响应
Object.defineProperty缺点
- 不能监听数组 ，需要拦截数组方法。
- 对于数组我们无法检测到直接去修改数组下标对应的内容以及利用 length 修改数组的长度
- 无法检测对象属性新增或者删除
使用proxy替代，上述问题都可以解决。兼容问题解决方案。
五：diff算法优化（还需了解）
