共计 1317 个字符，预计需要花费 4 分钟才能阅读完成。
简答题
1、Vue 3.0 性能晋升次要是通过哪几方面体现的？
Vue 3.0 性能晋升：
（1）响应式系统升级
- Vue.js 2.x 中响应式零碎的外围是 Object.defineProperty
Vue.js 3.0 中应用 Proxy 对象重写了响应式零碎
- 能够监听动静新增的属性
- 能够监听删除的属性
- 能够监听数组的索引和 length 属性
（2）编译优化
- Vue.js 2.x 中通过标记动态根节点，优化 diff 过程
Vue.js 3.0 中标记和晋升所有的动态节点，diff 的时候只须要比照动静节点内容
- Fragments 片段，模板中能够间接放文本内容或同级标签 (降级 vetur 插件)
- 动态节点晋升到 render 函数内部，只在初始化时执行一次，再次 render 无需再次执行
- Patch flag，标记动静节点（记录节点内容、节点属性），diff 时跳过动态根节点 只需关怀动静节点内容
- 缓存事件处理函数，缩小了不必要的更新操作
（3）源码体积的优化
Vue.js 3.0 中移除了一些不罕用的 API
- 例如：inline-template / filter 等
- Tree-shaking
2、Vue 3.0 所采纳的 Composition Api 与 Vue 2.x 应用的 Options Api 有什么区别？
Options Api
- 蕴含一个形容组件选项（props、data、methods 等）的对象
- Options Api 开发简单组件，同一个性能逻辑的代码被拆分到不同选项
Composition Api
- 提供了一种基于函数的 API，让咱们能够更灵便、更正当的组织组件的逻辑和代码构造
- 同一性能的代码不须要拆分，有利于对代码的提取和重用
3、Proxy 绝对于 Object.defineProperty 有哪些长处？
Proxy 的长处：
- Proxy 除了有 set 和 get 监听之外，还有其余对于对象的监听回调，能够监听动静新增的属性、监听删除的属性。has deleteProperty ownKeys apply 等等
- Proxy 更好的反对数组对象的监督监听，能够监听数组的索引和 length 属性
- Proxy 是以非侵入的形式监管了对象的读写，不会批改原对象
4、Vue 3.0 在编译方面有哪些优化？
Vue.js 3.0 中标记和晋升所有的动态节点，diff 的时候只须要比照动静节点内容
- Fragments 片段，模板中能够间接放文本内容或同级标签 (vscode 中要降级 vetur 插件)
- 动态节点晋升到 render 函数内部，只在初始化时执行一次，再次 render 无需再次执行
- Patch flag，标记动静节点（记录节点内容、节点属性），diff 时跳过动态根节点 只需关怀动静节点内容
- 缓存事件处理函数，缩小了不必要的更新操作
5、Vue.js 3.0 响应式零碎的实现原理？
- 应用 Proxy 对象实现属性监听，初始化时不须要遍历所有属性对其 defineProperty
- 多属性嵌套，在拜访属性的过程中解决下一级属性（递归解决）
- 默认监听动静增加的属性
- 默认监听属性的删除操作
- 默认监听数组索引和 length 属性的批改操作
- 能够作为独自的模块应用
外围办法
- reactive/ref/toRefs/computed
- effect (watch 函数外部应用的底层函数)
- track 收集依赖的函数
- trigger 触发更新的函数
正文完
