潜心修炼之精读《Vue.js设计与实现》第3️⃣章 Vue.js 3 的设计思路

作者在第一章中讲述了框架设计中需要权衡的利弊，在第二章中讨论了框架设计的几个核心要素，而这一章就是介绍 Vue.js 3 是怎么做的，并介绍了 Vue.js 3 的设计思路、工作机制及其重要的组成部分。

声明式地描述 UI

在 Vue.js 中，哪怕是事件，都有与之对应的描述方式。用户不需要手写任何命令式代码，这就是所谓的声明式地描述 UI。有两种描述方式： 　　

Vue.js 模板

<h1 @click="handler"><span></span></h1>

除了上面这种使用模板来声明式地描述 UI 之外，我们还可以用 JavaScript 对象来描述，代码如下所示：

const title = {
  // 标签名称
  tag: 'h1',
  // 标签属性
  props: {
    onClick: handler
  },
  // 子节点
  children: [
    { tag: 'span' }
  ]
}

由于模板字符串的存在，使用 JavaScript 对象描述 UI 相较于模板语法更加灵活。书中作者举了个例子，如果使用一个变量 level 来控制标签是 h 几（h1~h6），对于 JavaScript 对象只需要将 tag 属性改成 h${level} ；而对于模板语法，只能通过 v-if 来判断 level ，控制展示的标签是 h 几。

这种使用 JavaScript 对象来描述 UI 的方式，其实就是所谓的虚拟 DOM。Vue.js 提供的 h 函数就是一个辅助创建虚拟 DOM 的工具函数，它返回的就是一个对象：

import { h } from 'vue'

export default {
  render() {
    return h('h1', { onClick: handler }) // 虚拟 DOM
  },
}

渲染函数：一个组件要渲染的内容是通过渲染函数来描述的，也就是上面代码中的 render 函数，Vue.js 会根据组件的 render 函数的返回值拿到虚拟 DOM，然后就可以把组件的内容渲染出来了。

初识渲染器

假设我们有如下虚拟 DOM：

const vnode = {
  tag: 'div',
  props: {
    onClick: () => alert('hello')
  },
  children: 'click me'
}

它表示一个 div 标签，绑定了一个点击事件，并且有一个文本子节点。我们该如何编写一个渲染器，将它渲染成真实DOM呢：

function renderer(vnode, container) {
  // 使用 vnode.tag 作为标签名称创建 DOM 元素
  const el = document.createElement(vnode.tag)
  // 遍历 vnode.props，将属性、事件添加到 DOM 元素
  for (const key in vnode.props) {
    if (/^on/.test(key)) {
      // 如果 key 以 on 开头，说明它是事件
      el.addEventListener(
        key.substr(2).toLowerCase(), // 事件名称 onClick ---> click
        vnode.props[key] // 事件处理函数
      )
    }
  }
  
  // 处理 children
  if (typeof vnode.children === 'string') {
    // 如果 children 是字符串，说明它是元素的文本子节点
    el.appendChild(document.createTextNode(vnode.children))
  } else if (Array.isArray(vnode.children)) {
    // 递归地调用 renderer 函数渲染子节点，使用当前元素 el 作为挂载点
    vnode.children.forEach(child => renderer(child, el))
  }
  
  // 将元素添加到挂载点下
  container.appendChild(el)
}

　　这里的 renderer 函数接收如下两个参数。

• vnode：虚拟 DOM 对象。
• container：一个真实 DOM 元素，作为挂载点，渲染器会把虚拟 DOM 渲染到该挂载点下。

思考一下渲染器实现的思路：

• 首先根据 vnode.tag 创建对应的标签元素；
• 为元素添加事件，遍历 vnode.props，如果键值以 on 开头说明是一个事件，将 on 截掉之后得到事件名称，将事件名称小写化之后传给 addEventListener 绑定事件处理函数。
• 处理字节点：如果是字符串，则使用 createTextNode 函数创建一个文本节点，并将其添加到第一步新创建的元素内；如果是一个数组，就递归地调用 renderer 渲染子节点。

⭐ 当 vnode 对象变更时，渲染器应该精确找到变更点并只更新变更的内容，而不是完整的再走一遍由虚拟 DOM 创建真实 DOM 的过程导致不必要的性能开销，这就是 Diff 算法要做的事。

组件的本质

组件就是一组 DOM 元素的封装，这组 DOM 元素就是组件要渲染的内容，因此我们可以定义一个函数来代表组件，而函数的返回值就代表组件要渲染的

const MyComponent = function () {
  return {
    tag: 'div',
    props: {
      onClick: () => alert('hello')
    },
    children: 'click me'
  }
}

　　可以看到，组件的返回值也是虚拟 DOM，它代表组件要渲染的内容。搞清楚了组件的本质，我们就可以定义用虚拟 DOM 来描述组件了。很简单，我们可以让虚拟 DOM 对象中的 tag 属性来存储组件函数：

const vnode = {
  tag: MyComponent
}

　　就像 tag: 'div' 用来描述 <div> 标签一样，tag: MyComponent 用来描述组件，只不过此时的 tag 属性不是标签名称，而是组件函数。为了能够渲染组件，需要渲染器的支持。修改前面提到的 renderer 函数，如下所示：

function renderer(vnode, container) {
  if (typeof vnode.tag === 'string') {
    // 说明 vnode 描述的是标签元素
    mountElement(vnode, container)
  } else if (typeof vnode.tag === 'function') {
    // 说明 vnode 描述的是组件
    mountComponent(vnode, container)
  }
}

　　如果 vnode.tag 的类型是字符串，说明它描述的是普通标签元素，此时调用 mountElement 函数完成渲染；如果 vnode.tag 的类型是函数，则说明它描述的是组件，此时调用 mountComponent 函数完成渲染。其中 mountElement 函数与上文中 renderer 函数的内容一致：

function mountElement(vnode, container) {
  // 使用 vnode.tag 作为标签名称创建 DOM 元素
  const el = document.createElement(vnode.tag)
  // 遍历 vnode.props，将属性、事件添加到 DOM 元素
  for (const key in vnode.props) {
    if (/^on/.test(key)) {
      // 如果 key 以字符串 on 开头，说明它是事件
      el.addEventListener(
       key.substr(2).toLowerCase(), // 事件名称 onClick ---> click
        vnode.props[key] // 事件处理函数
      )
    }
  }
  
  // 处理 children
  if (typeof vnode.children === 'string') {
    // 如果 children 是字符串，说明它是元素的文本子节点
    el.appendChild(document.createTextNode(vnode.children))
  } else if (Array.isArray(vnode.children)) {
    // 递归地调用 renderer 函数渲染子节点，使用当前元素 el 作为挂载点
    vnode.children.forEach(child => renderer(child, el))
  }
  
  // 将元素添加到挂载点下
  container.appendChild(el)
}

　　再来看 mountComponent 函数是如何实现的：

01 function mountComponent(vnode, container) {
02   // 调用组件函数，获取组件要渲染的内容（虚拟 DOM）
03   const subtree = vnode.tag()
04   // 递归地调用 renderer 渲染 subtree
05   renderer(subtree, container)
06 }

　　可以看到，非常简单。首先调用 vnode.tag 函数，我们知道它其实就是组件函数本身，其返回值是虚拟 DOM，即组件要渲染的内容，这里我们称之为 subtree。既然 subtree 也是虚拟 DOM，那么直接调用 renderer 函数完成渲染即可。

　　这里希望大家能够做到举一反三，例如组件一定得是函数吗？当然不是，我们完全可以使用一个 JavaScript 对象来表达组件，例如：

01 // MyComponent 是一个对象
02 const MyComponent = {
03   render() {
04     return {
05       tag: 'div',
06       props: {
07         onClick: () => alert('hello')
08       },
09       children: 'click me'
10     }
11   }
12 }

　　这里我们使用一个对象来代表组件，该对象有一个函数，叫作 render，其返回值代表组件要渲染的内容。为了完成组件的渲染，我们需要修改 renderer 渲染器以及 mountComponent 函数。

　　首先，修改渲染器的判断条件：

01 function renderer(vnode, container) {
02   if (typeof vnode.tag === 'string') {
03     mountElement(vnode, container)
04   } else if (typeof vnode.tag === 'object') { // 如果是对象，说明 vnode 描述的是组件
05     mountComponent(vnode, container)
06   }
07 }

　　现在我们使用对象而不是函数来表达组件，因此要将 typeof vnode.tag === 'function' 修改为 typeof vnode.tag === 'object'。

　　接着，修改 mountComponent 函数：

01 function mountComponent(vnode, container) {
02   // vnode.tag 是组件对象，调用它的 render 函数得到组件要渲染的内容（虚拟 DOM）
03   const subtree = vnode.tag.render()
04   // 递归地调用 renderer 渲染 subtree
05   renderer(subtree, container)
06 }

　　在上述代码中，vnode.tag 是表达组件的对象，调用该对象的 render 函数得到组件要渲染的内容，也就是虚拟 DOM。

模板的工作原理

渲染器是将渲染函数返回的虚拟 DOM 渲染成真实 DOM，而渲染函数是哪来的呢？那就要提到 Vue.js 中的另一个重要组成部分了：编译器

编译器和渲染器一样，只是一段程序而已，不过它们的工作内容不同。编译器的作用其实就是将模板编译为渲染函数，例如给出如下模板：

<div @click="handler">
  click me
</div>

　　对于编译器来说，模板就是一个普通的字符串，它会分析该字符串并生成一个功能与之相同的渲染函数：

render() {
  return h('div', { onClick: handler }, 'click me')
}

Vue.js 是各个模块组成的有机整体

如前所述，组件的实现依赖于渲染器，模板的编译依赖于编译器，并且编译后生成的代码是根据渲染器和虚拟 DOM 的设计决定的，因此 Vue.js 的各个模块之间是互相关联、互相制约的，共同构成一个有机整体。

这里我们以编译器和渲染器这两个非常关键的模块为例，看看它们是如何配合工作，并实现性能提升的。

根据上文的介绍，我们知道编译器会把这段代码编译成渲染函数：

render() {
  // 为了效果更加直观，这里没有使用 h 函数，而是直接采用了虚拟 DOM 对象
  // 下面的代码等价于：
  // return h('div', { id: 'foo', class: cls })
  return {
    tag: 'div',
    props: {
      id: 'foo',
      class: cls
    }
  }
}

　　可以发现，在这段代码中，cls 是一个变量，它可能会发生变化。我们知道渲染器的作用之一就是寻找并且只更新变化的内容，所以当变量 cls 的值发生变化时，渲染器会自行寻找变更点。对于渲染器来说，这个“寻找”的过程需要花费一些力气。那么从编译器的视角来看，它能否知道哪些内容会发生变化呢？如果编译器有能力分析动态内容，并在编译阶段把这些信息提取出来，然后直接交给渲染器，这样渲染器不就不需要花费大力气去寻找变更点了吗？这是个好想法并且能够实现。Vue.js 的模板是有特点的，拿上面的模板来说，我们一眼就能看出其中 id="foo" 是永远不会变化的，而 :class="cls" 是一个 v-bind 绑定，它是可能发生变化的。所以编译器能识别出哪些是静态属性，哪些是动态属性，在生成代码的时候完全可以附带这些信息：

render() {
  return {
    tag: 'div',
    props: {
      id: 'foo',
      class: cls
    },
    patchFlags: 1 // 假设数字 1 代表 class 是动态的
  }
}

　　如上面的代码所示，在生成的虚拟 DOM 对象中多出了一个 patchFlags 属性，我们假设数字 1 代表“ class 是动态的”，这样渲染器看到这个标志时就知道：“哦，原来只有 class 属性会发生改变。”对于渲染器来说，就相当于省去了寻找变更点的工作量，性能自然就提升了。

　　通过这个例子，我们了解到编译器和渲染器之间是存在信息交流的，它们互相配合使得性能进一步提升，而它们之间交流的媒介就是虚拟 DOM 对象。