跳转至

1.框架设计概览

框架设计概览

命令式和声明式

  • 命令式：注重过程，通过“面条式”代码来控制界面和交互逻辑，典型的例子：jQuery。

  • 声明式：在一个模板中定义交互逻辑，框架解析该模板并实现命令式的功能，例子：Vue Template。

  • 命令式代码更新消耗 = 直接修改

  • 声明式代码更新消耗 = 查找差异 + 直接修改

命令式的好处是效率高，但可维护性低；声明式的好处是可维护性好，但性能不如命令式（因为声明式本质就是封装了命令式的代码）。 声明式框架通过优化“更新性能”来实现性能无限趋近于命令式。

如果我们能够最小化找出差异的性能消耗，就可以让声明式代码的性能无限接近命令式代码的性能。

虚拟 DOM 的性能

对于有很多元素的网页，虚拟DOM的性能远高于对元素设置 innerHTML，因为虚拟DOM只是JavaScript对象，而 innerHTML 渲染真实DOM是HTML字符串。 虚拟DOM只更新节点中变化的地方，这依赖于 Diff 算法。 虽然原生JS可以直接修改变化的节点，但是对于复杂的网页维护成本过高。

运行时和编译时

  • 运行时：把虚拟DOM树结构（JS对象）渲染成真实DOM
  • 编译时：把模板（如 Vue Template）转换成 VNode 对象，再调用运行时渲染 Vue3 是一个编译时+运行时框架

框架设计

  • 提升开发体验：通过在开发模式中打印利于 debug 的信息
  • 控制框架体积：通过 Tree-Shaking 移除用不执行的代码
  • 根据不同平台输出不同产物：Web/ESM/CJS 等
  • 特性开关：允许用户手动开关一些特性，比如说 Vue2 的 OptionsAPI 特性
  • 错误处理：有统一的错误处理函数
  • 良好的 TypeScript 支持：Vue3 中含有大量的 TS 支持代码

Vue3 的设计思路

  • Vue3是一个声明式框架，模板即声明。
  • 渲染器：通过渲染器可以把虚拟DOM对象转换为真实DOM，其基本原理是递归解析虚拟DOM树，使用 document.createElement 方法创建真实DOM元素，并在元素上挂载各种属性，最后把真实DOM挂载到指定的DOM节点之下。
  • 组件：组件的本质是虚拟DOM的集合，包含 render 方法和各种属性。
  • 模板的原理：通过编译器把 把 template 模板编译成 render 函数。render 函数用于返回虚拟DOM对象。