10月5日尤大大公布了 vue 3.0 的源码，目前还是 pre-alpha 状态，预计年后会发布正式版本，这个无疑是国庆期间前端圈最大的新闻了。虽然此前关于 vue 3.0众说纷纭，但是既然已经官宣了，而且明年有可能迁移至新的开发框架，是时候撸起袖子学习一波了。
Vue3.0的设计目标
- 更小
- 更快
- 加强TypeScript支持
- 加强API设计一致性
- 提高自身可维护性
- 开放更多底层功能
具体可以从以下方面来理解
1，压缩包体积更小（Tree-Shaking 的支持）
支持了 tree-shaking （剪枝）：像修剪树叶一样把不需要的东西给修剪掉，使 Vue3 的体积更小。
需要的模块才会打入到包里，优化后的 Vue3.0 的打包体积只有原来的一半（13kb）。哪怕把所有的功能都引入进来也只有23kb，依然比 Vue2.x 更小。像 keep-alive 、 transition 甚至v-for 等功能都可以按需引入
2，Object.defineProperty -> Proxy
双向响应原理由Object.defineProperty改为基于ES6的Proxy，使其颗粒度更大，速度更快，且消除了之前存在的警告；
Object.defineProperty是一个相对比较昂贵的操作，因为它直接操作对象的属性，颗粒度比较小。将它替换为es6的Proxy，在目标对象之上架了一层拦截，代理的是对象而不是对象的属性。这样可以将原本对对象属性的操作变为对整个对象的操作，颗粒度变大。
javascript引擎在解析的时候希望对象的结构越稳定越好，如果对象一直在变，可优化性降低，Proxy不需要对原始对象做太多操作。
3，Virtual DOM 重构
重写了 Vdom （ diff 算法优化 ），突破了 Vdom 的性能瓶颈
传统vdom的性能瓶颈：
- 虽然 Vue 能够保证触发更新的组件最小化，但在单个组件内部依然需要遍历该组件的整个 vdom 树。
- 传统 vdom 的性能跟模版大小正相关，跟动态节点的数量无关。在一些组件整个模版内只有少量动态节点的情况下，这些遍历都是性能的浪费。
- JSX 和手写的 render function 是完全动态的，过度的灵活性导致运行时可以用于优化的信息不足
vue3.0采用了动静结合的解决方案，将vdom的操作颗粒度变小，每次触发更新不再以组件为单位进行遍历，主要更改如下
patch flag 优化静态树
patch flag 优化静态属性
事件侦听器缓存
等等
4, 更多编译时优化
Slot 默认编译为函数：父子之间不存在强耦合，提升性能
Monomorphic vnode factory：参数一致化，给它children信息，
Compiler-generated flags for vnode/children types
5，选用Function_based API
为什么撤销 Class API ?
1，更好地支持TypeScript
- Props 和其它需要注入到 this 的属性导致类型声明依然存在问题
- Decorators 提案的严重不稳定使得依赖它的方案具有重大风险
2，除了类型支持以外 Class API 并不带来任何新的优势
3，vue中的UI组件很少用到继承，一般都是组合，可以用Function-based API
6, 生命周期函数
Vue3 中的生命周期函数，与 Vue2 中略有不同
生命周期函数的用法
Vue3 中，要在 setup() 函数中使用生命周期来完成需求
当你需要使用生命周期时，直接导入 onxxx 一族的生命周期钩子
代码语言：javascript复制import { onMounted, onUpdated, onUnmounted } from 'vue'
const MyComponent = {
setup() {
onMounted(() => {
console.log('mounted!')
})
onUpdated(() => {
console.log('updated!')
})
onUnmounted(() => {
console.log('unmounted!')
})
},
}这些生命周期钩子只能在 setup() 内部同步使用，因为他们依赖正在调用 setup() 的组件实例。
与 2.x 版本相对应的生命周期钩子
新增的钩子函数
除了与 Vue2.x 等效的生命周期之外，composition-api 还新增了以下生命周期钩子用作调试：
- onRenderTracked
- onRenderTriggered
7, Composition API
composition-api 是一个 Vue3 中新增的功能，它的灵感来自于 React Hooks ，是比 mixin 更强大的存在。
composition-api 可以提高代码逻辑的可复用性，从而实现与模板的无关性；同时使代码的可压缩性更强。另外，把 Reactivity 模块独立开来，意味着 Vue3.0 的响应式模块可以与其他框架相组合。
参考：
https://www.jianshu.com/p/1fd73091e2e4
https://zhuanlan.zhihu.com/p/92143274
