Vue1X
Vue1引入了响应式数据的概念，使用Object.definePropertyAPI来实现的。DOM只是数据的映射，数据发生改变可以自动更新DOM，用户只需要专注与数据逻辑的修改，没有过多的心智负担。
缺点
Vue1的响应式是对每个动态数据都实例化一个watcher，本身响应式数据的创建也需要消耗一定的时间。当项目较大的时候就会出现性能瓶颈，这也是为什么Vue最初不适合大型项目的原因
Vue2
Vue2版本是一个相对中庸的设计，相对于Vue1最大的改变就是引入了虚拟DOM。将watcher提升到组件级别，
VDOM出现的原因？
在vue1中是没有patch的，因为界面中的每个依赖都有专门的watcher负责更新，也正是因为这样当项目规模变得越来越大的时候性能就成为了瓶颈，vue2为了降低watcher的粒度，每个组件都只有一个watcher，当需要更新的时候，通过diff算法对比新旧VNode，精确的找到发生改变的地方，最小成程度的操作DOM。
vdom的发展史：
- vue1是没有vdom的 每个动态节点一个watcher 性能瓶颈来源于watcher过多
- vue2阶段，将响应式做到了组件层面 引入了vdom 设计相对于中庸
- vue3对静态节点做到了更加精细的标记，vdom的性能和动态节点相关
缺点
-
1.响应式系统，采用
Object.defineProperty只能监测对象已有的属性，对于新增和删除需要使用额外的API，对于数组的响应式也是重写了API来实现。 -
2.在编译环境，vnode的性能和组件的大小相关和动态节点的数量无关
-
3.对于类型系统的支持度不够，需要手动引入typescript
Vue3的改变
Vue3相对于Vue2的改变体现在 源码、性能和语法API 这三个方面
1.源码优化
- 更好的代码管理方式：monorepo
- 使用
typescript重写Vue3，对类型系统更好的支持
2.性能优化
- 源码体积的减少 首先：移除了一些冷门的feature（filter）；其次：引入tree-shaking技术，减少打包体积；tree-shaking技术是依赖于ES2015模板语法的静态结构，通过编译阶段的静态分析，在没有引入的模板上打上标记
- 响应式系统的升级 通过proxy API重写了响应式系统
- 编译时的优化 Vue3将vnode的更新性能由于模板大小相关 提升到和 动态节点数量相关
3.语法API的优化---compositionAPI
作用:
- 优化逻辑组织
- 优化逻辑复用
- 拥抱了函数式编程 可以通过函数组合的方式更加优雅的管理和维护我们的代码
options VS composition
- optionsAPI的特点：对于简单的需求数据方法分离比较清晰，对于相对复杂的功能需要上线反复横跳，维护成本较高
- composition:将跟一个功能相关的所有内容都放在一个地方维护，还可以将某个功能拆分出去放在一个函数中维护，可以实现逻辑代码的复用。相对于
mixins的好处: 数据来源清晰，不会产生命名冲突的问题
