走进Vue -- Vue2.x与Vue3.0对比

1. Vue3.0性能相比Vue2.x提升主要通过哪几个方面？

Vue3.0性能提升主要通过以下三方面：

• 响应式系统升级
• 编译优化及重写虚拟DOM
• 源码体积优化

a. 响应式系统升级

Vue2.x中响应式系统的核心是Object.defineProperty
在Vue初始化期间，该方法会遍历data对象的所有成员，把它们转换成getter和setter；
如果成员中又有对象类型的话，需要递归处理该成员，把该成员下的属性转换成响应式属性；
也就是说，对象中的成员不管是使用或者没有使用，都会被转换为响应式属性；

而Vue3.0主要是使用ES6中Proxy对象替换了原先Vue2.x的Object.defineProperty方法，重写了响应式系统，它可以：

• 可以监听动态新增的属性，而Vue2.x中需要手动调用vue.$set方法
• 可以监听删除的属性
• 可以监听数组索引及length属性
• 不需要在初始化的时候遍历所有属性，只有在访问某个属性的时候，才会递归处理该属性，使其转换成响应式属性

b. 编译优化及重写虚拟DOM – 提升了首次渲染和更新的过程

Vue2.x版本，在vue构建过程中，首先需要将组件的模板编译成render函数。编译的时候会编译静态根节点（需要有一个静态子节点）和静态节点，
当组件状态发生变化的时候，会触发update函数从而执行虚拟DOM的patch操作，遍历所有虚拟节点，找到差异，然后再更新到真实节点上。
diff的过程中，会先对比新旧的div以及属性，然后再对比其内部子节点。

Vue2.x中，通过标记静态根节点后，在diff的时候进行跳过，从而优化diff的过程；
而Vue3.0中，通过标记和提升所有的静态根节点，diff的量就相对更少了，只需要对比动态节点内容；

c. 源码体积优化

• Vue3.0中移除了一些不常用的API，如inline-template、filter等
• Tree-shaking使得打包后的项目体积更小

2. Vue3.0所采用的composition api与Vue2.x使用的options API有何区别？

• Vue2.x options api:

  • 包含一个描述组件选项（data、methods、props等）的对象
  • options api开发复杂组件时，同一个功能逻辑的代码被拆分到不同选项（data、methods、props等），这会导致代码很长不易于维护

• Vue3.0 composition api

  • 基于函数的api
  • 可以更加灵活的组织组件逻辑

综上所述options api和composition api的主要区别是：

• options api将同一功能逻辑的代码拆分到不同属性（data、methods、props等），这会导致在开发复杂组件时，代码很长不易于维护的问题

• composition api则将功能逻辑合并到了一起解决了options api存在的拆分代码的问题, 方便查看某一功能逻辑的所有代码，便于维护

• RFC(Request For Comments)： https://github.com/vuejs/rfcs

• Composition API RFC: https://composition-api.vuejs.org

3. Proxy相对于Object.defineProperty有哪些优势？

• 可以监听动态新增的属性，而Vue2.x中需要手动调用vue.$set方法
• 可以监听删除的属性
• 可以监听数组索引及length属性
• 不需要在初始化的时候遍历所有属性，只有在访问某个属性的时候，才会递归处理该属性，使其转换成响应式属性

4. Vue3.0响应式系统的实现原理

Vue3 使用 Proxy 对象重写响应式系统，这个系统主要有以下几个函数来组合完成的：

1. reactive:
   接收一个参数，判断这参数是否是对象。不是对象则直接返回这个参数，不做响应式处理
   创建拦截器对象 handler, 设置 get/set/deleteProperty
   get
   收集依赖（track）
   返回当前 key 的值。
   如果当前 key 的值是对象，则为当前 key 的对象创建拦截器 handler, 设置 get/set/deleteProperty
   如果当前的 key 的值不是对象，则返回当前 key 的值
   set
   设置的新值和老值不相等时，更新为新值，并触发更新（trigger）
   deleteProperty
   当前对象有这个 key 的时候，删除这个 key 并触发更新（trigger）
   返回 Proxy 对象
2. effect: 接收一个函数作为参数。作用是：访问响应式对象属性时去收集依赖
3. track:
   接收两个参数：target 和 key
   如果没有 activeEffect，则说明没有创建 effect 依赖
   如果有 activeEffect，则去判断 WeakMap 集合中是否有 target 属性，
   WeakMap 集合中没有 target 属性，则 set(target, (depsMap = new Map()))
   WeakMap 集合中有 target 属性，则判断 target 属性的 map 值的 depsMap 中是否有 key 属性
   depsMap 中没有 key 属性，则 set(key, (dep = new Set()))
   depsMap 中有 key 属性，则添加这个 activeEffect
4. trigger:
   判断 WeakMap 中是否有 target 属性
   WeakMap 中没有 target 属性，则没有 target 相应的依赖
   WeakMap 中有 target 属性，则判断 target 属性的 map 值中是否有 key 属性，有的话循环触发收集的 effect()