fed-e-task-03-05

简答题

1、Vue 3.0 性能提升主要是通过哪几方面体现的？

• 响应式系统升级：3.0使用Proxy重写响应式系统，可以监听动态新增的属性、可以监听删除的属性、可以监听数组的索引和length属性
• 编译优化：3.0中标记和提升所有的静态根节点，diff的时候只需要对比动态节点内容
• 源码体积的优化：3.0中移除一些不常用的api，3.0对tree-shaking更加友好，大部分的api都支持

2、Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？

• Options Api 对于同一个功能逻辑的代码会被拆分到不同的选项中（data、computed、methods等）
• Composition Api是一组基于函数的Api，可以更加灵活的组织功能逻辑。它能把同一个功能逻辑的代码写在一块，方便阅读

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

• Object.defineProperty无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值时不能实时响应，因此vue2.0针对数组的8种方法进行了hack处理，有一定的局限性。
• Object.defineProperty只能劫持对象的属性，因此对应深层嵌套的对象，我们需要对每个属性对象进行遍历，性能会比较受影响
• Proxy的优势主要在于：它可以劫持整个对象，并返回一个新对象，并且有13种劫持操作。对于数组和对象，之前使用Object.defineProperty遇到的问题都解决了，不需要写hack处理数组的方法，也不需要遍历劫持对象的属性。

4、Vue 3.0 在编译方面有哪些优化？

• 3.0中标记和提升所有的静态根节点，diff的时候只需要对比动态节点内容

5、Vue.js 3.0 响应式系统的实现原理？

• 使用Proxy来代理劫持一个对象
• 在handlers的get方法中进行收集依赖
• 在handlers的set方法中进行触发响应