VUE 3.0 学习之优化的点package（比如reactivity响应式库）是可以独立于Vue.js使用，如果用户只

发展历程

1.0 到 2.0，最大的优化就是引入虚拟DOM的概念

2.0 的痛点：

一共三点：源码、性能、自身API

模块拆分更细化，职责划分更明确，模块之间的依赖关系更加明确，开发人员也更容易阅读、理解和更改所有模块源码，提高代码的可维护性
package（比如reactivity响应式库）是可以独立于Vue.js使用，如果用户只想使用Vue.js 3.0 的响应式能力，可单独依赖这个响应式库而不是去依赖整个Vue.js ，减小了引用的体积大小。

2.0 使用flow进行类型校验，但是flow对一些复杂场景类型的检查，支持的并不好，比如：

const propOptions: any = vm.$options.props // wtf flow？

3.0 使用ts的原因：

3.0在源码体积减少方面做的工作:

tree-shaking：依赖ES2015模块语法的静态结构（即import和export），通过编译阶段的

静态分析，找到没有引入的模块并打上标记。

如果项目中没有引入Transition、keepAlive等组件，那么他们对应的代码就不会打包。这样

也就间接的达到了减少包体积的目的。

实现DOM功能，就必须劫持数据的访问与更新

1.0 和 2.0都是通过Object.defineProperty 劫持数据的getter 和 setter

3.0 使用了Proxy API做数据劫持，由于劫持的是整个对象，所以对对象的属性的增加和删除都能监听到。缺点是：不能监听到内部深层次的对象变化，3.0的处理方式是在getter中递归响应式，好处是真正访问到内部对象才会变成响应式，而不是无脑递归，同时也提升了性能。

new Vue --- init --- $mount --- compile --- render ---vnode --- patch --- DOM

响应式优化，除了在数据劫持时优化，还可以在patch阶段，通过在编辑阶段优化编译的结果，实现运行时patch过程的优化。

3.0 通过编译阶段对静态模板的分析，编译生成了Block tree。

3.0在编译阶段还包含对slot的编译优化、事件侦听函数的缓存优化，并且在运行时重写了diff算法

1.0 和 2.0 时，编写组件本质就是在编写一个 “包含了描述组件选项的对象”，称为 Options API，写法符合正常逻辑思维，易于理解。

Options API

Composition API

2.0的 mixin 存在的问题：

3.0 的 Composition API解决了mixins的这两个问题。