vue.js的设计与实现

(Updated: )
笔记 › Javascript

第一章 权衡的艺术

框架设计是权衡的艺术。

视图层框架分为：

  • 命令式：比如Jquery, 注重过程
  • 声明式：比如Vue, 注重结果

vuejs封装了过程，内部实现时命令式的暴露给用户声明式。
框架本身就是封装了命令式代码才实现了面向用户的声明式。

声明式代码性能不优于命令式代码的性能。

声明式代码更新性能消耗= 查找差异的性能消耗 + 直接更新的性能消耗
命令式代码更新性能消耗= 直接更新的性能消耗

声明式代码可维护性强，命令式代码性能更好

框架设计要做的是：保持可维护性同事性能损失最小。

最小化找出差异性能消耗：虚拟DOM

框架设计有纯运行时、纯编译时、运行时+编译时三种方式

树型结构对象：

1
2
3
4
5
6
{
  tag: 'div',
  children: [
    { tag: 'a', children: 'hello' },
  ]
}

纯运行时：通过render函数将树型结构的数据对象递归遍历为DOM元素

纯编译时：Compiler对象将HTML字符串转换为命令式代码

运行时+编译时：通过Compiler对象将HTML字符串编译成树型结构的数据对象，再通过render函数将树型结构的数据对象递归遍历为DOM元素

vue.js采用运行时+编译时

框架设计的核心要素

  • 提升用户的开发体验：提供良好的警告信息至关重要，有助于开发者快速定位问题
  • 控制框架代码的体积
  • 框架做到良好的tree-shaking：开发环境中打印警告信息，生产环境则不包含提升开发体验的代码
  • 框架应该输出怎样的构建产物
  • 特性开关
  • 错误处理
  • 良好的typescript类型支持

第三章 vue.js的设计思路

使用js对象来描述UI的方式就是虚拟DOM，vuejs也支持使用模版来描述UI，但是使用js对象即虚拟DOM更加灵活，模版描述UI更直观。虚拟DOM和模版都是声明式描述UI。

渲染函数使用虚拟DOM描述UI

1
2
3
4
//...
render() {
  return h('div', { onClick: handler})
}

虚拟dom：使用js对象来描述真实的DOM结构，包含tag、props、children等属性

渲染器：将虚拟DOM渲染为真实的DOM结构
编译器：将模版编译为渲染函数；会将模版内容编译为渲染函数并添加到script标签的组件对象上。

渲染器的思路：
1、创建元素tag
2、为元素添加属性和事件
3、处理children

组件本质是一组虚拟DOM元素的封装。
无论是使用模版还是直接手写渲染函数，对于一个组件来说它渲染的内容都要通过渲染函数产生。然后渲染器再吧渲染函数产生的虚拟dom渲染为真实的DOM结构。这就是模版的工作原理。

组件实现依赖于渲染器，模版编译依赖于编译器。

第四章 响应式系统

副作用函数：比如一个函数修改了全局变量

Proxy：拦截对一个对象的基本操作，只能代理一个对象的基本语义。