Vue3和Vue2的对比

vue3已经是大势所趋，很多新项目都愿意使用vue3来做。

主要内容：

1. 响应式系统提升

vue2使用 Object.defineProperty为对象定义一个属性，设置属性之后，可以监听get和set方法，定义好属性之后这个属性就会多两个方法getter和setter方法做数据劫持，然后实现双向数据绑定。vue重写了很多数组和对象的操作方法，可以让我们更方便的实现响应式效果。

vue2在初始化的时候，对data中的每个属性使用Object.defineProperty调用getter和setter使之变为响应式对象。如果属性值为对象，还会递归调用Object.defineProperty使之变为响应式对象。

vue3使用Proxy对象重写响应式，proxy的性能本来就比Object.defineProperty好，proxy可以拦截属性的访问、赋值、删除等操作，不需要初始化的时候遍历所有属性，另外有多层属性嵌套的话，只有访问某个属性的时候，才会递归处理下一级的属性。
优势：

• 可以监听动态新增属性
• 可以监听删除的属性
• 可以监听数组的索引和length属性

注：vue不能再ie8一下的浏览器使用，因为他们不支持数据双向绑定方法，根本就没有Object.defineProperty这个方法。

2. 编译优化

优化编译和重写虚拟dom，让首次渲染和更新dom性能有更大的提升，vue2通过标记静态根节点，优化diff算法，vue3标记和提升所有静态根节点，diff的时候只比较动态节点内容。以及模板里不用创建唯一的根节点，可以直接放同级标签和文本内容。
静态提升，跳过静态节点，直接对比动态节点，缓存事件处理函数。

3. 源码体积优化

vue3移除了一些不常用的api，例如：inline-template、filter等 。使用tree-shaking

tree-shaking 就是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫 Dead code elimination，Tree Shaking 指的就是当我引入一个模块的时候，我不引入这个模块的所有代码，我只引入我需要的代码
简单来讲，就是保持代码运行结果不变的前提下，去除无用的代码。
如果把代码打包比作制作蛋糕，传统的方式就是把鸡蛋（带壳）全部丢进去搅拌，然后放进烤箱，最后把没有用的蛋壳全部挑选并剔除出去
而tree-shaking则是一开始就把有用的蛋白蛋黄（import）放入搅拌，最后直接出蛋糕。也就是说，tree-shaking其实就是找出使用的代码。

4. 部分补充

• 组合式api
  1. setup语法糖配置
  2. ref和reactive
  3. watch和watchEffect
  4. provide和inject
  5. …
• 新的内置组件
  1. Fragment
  2. Teleport
  3. Suspense
• 新得生命周期钩子函数
• data 选项应始终被声明为一个函数
• 移除keyCode支持作为 v-on 的修饰符
• 拥抱ts，vue3可以更好的支持typescript
• 打包大小减少41%
• 初次渲染快55%, 更新渲染快133%
• 内存减少54%