[fed-task-03-05]Vue.js 3.0 Composition API 及 3.0 原理剖析

简答题

一、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

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

Options Api

• 包含一个描述组件选项（props、data、methods 等）的对象
• Options Api 开发复杂组件，同一个功能逻辑的代码被拆分到不一样选项

Composition Api

• 提供了一种基于函数的API，让咱们能够更灵活、更合理的组织组件的逻辑和代码结构
• 同一功能的代码不须要拆分，有利于对代码的提取和重用

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

Proxy 的优势：

• Proxy 除了有 set 和 get 监听以外，还有其余对于对象的监听回调，能够监听动态新增的属性、监听删除的属性。has deleteProperty ownKeys apply 等等
• Proxy 更好的支持数组对象的监视监听，能够监听数组的索引和 length 属性
• Proxy 是以非侵入的方式监管了对象的读写，不会修改原对象

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

Vue.js 3.0 中标记和提高全部的静态节点，diff 的时候只须要对比动态节点内容

• Fragments 片断，模板中能够直接放文本内容或同级标签(vscode中要升级 vetur 插件)
• 静态节点提高到 render 函数外部，只在初始化时执行一次，再次render无需再次执行
• Patch flag，标记动态节点（记录节点内容、节点属性），diff时跳过静态根节点 只需关心动态节点内容
• 缓存事件处理函数，减小了没必要要的更新操做

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

• 使用 Proxy 对象实现属性监听，初始化时不须要遍历全部属性对其 defineProperty
• 多属性嵌套，在访问属性的过程当中处理下一级属性（递归处理）
• 默认监听动态添加的属性
• 默认监听属性的删除操做
• 默认监听数组索引和 length 属性的修改操做
• 能够做为单独的模块使用

核心方法

• reactive/ref/toRefs/computed
• effect (watch函数内部使用的底层函数)
• track 收集依赖的函数
• trigger 触发更新的函数