vue3 问题总结

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

• 响应式系统升级
  1. Vue.js2.x 中响应式系统的核心 defineProperty
  2. Vue.js3.0 使用Proxy对象重写响应式系统。
     • 可以监听动态新增的属性
     • 可以监听删除的属性
     • 可以监听数组的索引和length属性
• 编译优化
  1. Vue.js 2.x 中通过标记静态根节点， 优化diff 的过程
  2. Vue.js 3.0 中标记和提升所有的静态根节点， diff 的时候只需要对比动态节点的内容
     • Fragments （升级vetur 插件）
     • 静态提升
     • patch flag
     • 缓存事件处理函数。
• 源码体积优化

1. Vue.js 3.0 中移除了一些不常用的 API
   • 例如： inline-template filter
2. Tree-shaking

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

1. 可以检测到用户删除对象和增加对象。
2. 不需要事先遍历所有的对象元素变成响应式的。
3. js Proxy是设计初衷就是代理对象的。性能比Object.defineProperty 更好。
4. Object.defineProperty 改变数组的方法都需要重写。来实现数据的响应式。

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

1. Vue.js 2.X 中通过标记静态根节点，优化diff的过程
2. Vue.js 3.0 中标记的提升所有的静态根节点， diff的时候只需要对比动态节点内容

• Fragments （升级vetur插件）
• 静态提升
• Patch flag
• 缓存事件处理函数

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

• Proxy 对象实现属性监听
• 多层属性嵌套，在访问属性过程中处理下一级属性
• 默认监听动态添加的属性
• 默认监听属性的删除操作
• 默认监听数组索引和 length 属性
• 可以作为单独的模块使用