更快
| 优化点 | 2.x实现 | 3.0实现 |
|---|---|---|
| 模板编译v-dom | 运行时判断是组件/原生元素 | 编译时判断类型生成相关代码 |
| 模板中子元素的类型 | 多重判断 | 编译时留下hint给运行时提示，只有一个子元素那么算法可以直接免去不必要的判断 |
| slot | 父子组件关联更新 | 类似slot-scope生成lazy函数，由子组件来控制slot，精确依赖收集，避免不必要的组件渲染 |
| 静态内容提取 | 检测到静态模板提取出来，复用virtual-dom跳过比对 | 部分静态资源提取，提取静态属性对象，比对动态children |
| 内联函数提取 | <com @click="count++">每次父组件重渲染会生成新函数，导致子组件重渲染 | 将这类函数cache后复用，避免组件无谓更新 |
| 数据监听系统 | object.defineProperty | proxy全语言特性支持：对象属性的增删，数组的index和length；lazy by default只监听使用到的数据；data computed props代理改成proxy包装，在调用时进行判断，加快的实例初始化 |
| 对开发人员 | - | renderTriggered事件，允许人们查看触发更新的内容 |
更小
- 通过ES Module import实现按需引入，内置函数如keep-alive，transition；指令运行时如v-model；v-for；工具函数mixin，async component等
更易于维护
- ts代码重构
多端渲染支持
- custom render api
- 引入vue运行时代码 与dom无关，将抛出节点操作，和将虚拟dom渲染到原生
composition api
学习：http://caibaojian.com/vue3-composition-api-2.html
原有的vue2.0存在组件可读性差，mixin和slot复用都有问题，ts支持不好等问题，所以引入了composition api来解决，从options api配置选项，逻辑混乱的写法转向高内聚、低耦合的函数式编程，以setup为入口，通过reactive、ref赋予数据响应化，其中ref保证了基本对象的响应，reactive主要用于处理引用对象的响应，可以通过toRefs方法转化；内部可以使用computed计算属性和watchEffect监听器，onBeforeMount和onMounted等生命周期函数；最终通过return返回想要在模板中使用的内容；setup函数伴随着beforeCreate和created函数的执行，其他的生命周期通过在前面添加on进行引用。
vue3.0升级之处
文档链接： https://www.javascriptc.com/vue3js/guide/migration/transition.html#_2-x-%E8%AF%AD%E6%B3%95
新功能
- 组合式api，即通过setup，进行props data computed watch method 的混合处理并通过方法ref reactive toRefs 实现响应化，改变2.0的分散式处理，通过分文件编写不同模块在对应的vue的setup中统一引入和暴露出来，实现模块开发，非常的清爽。
- 改变组件的位置，通过teleport to="body" 将组件绑定到指定的父元素上，可以挂载多个顺序叠加，可以挂载自定义组件，而不只是通过css定位来修改层级
- 将支持多个根节点，需要指定一个根节点挂载attribute即绑定 v-bind="$attrs"
全局api
- 全局api不再直接挂载到Vue上，如component directive mixin 等指令，统一挂载到app上，从应用层面进行区分这些绑定关系，防止全局的污染，方便测试和开发。
- 全局和内部的api已经被重构为可以tree-shaking 如Vue.nextTick()的内部代码可能变为死代码，现改为使用nextTick()
指令
- v-model 支持绑定多个
- v-for 默认生成key值
- v-if和v-for 优先判断v-if
组件
- 使用defineAsyncComponent注册异步组件
