Vue.js的设计思路

从全局视角了解 Vue.js 3 的设计思路、工作机制及其重要的组成部分。我们可以把这些组成部分当作独立的功能模块，看看它们之间是如何相互配合的。

1、声明式地描述 UI

Vue.js 3 是一个声明式的 UI 框架，意思是说用户在使用 Vue.js 3 开发页面时是声明式地描述 UI 的。思考一下，如果让你设计一个声明式的 UI 框架，你会怎么设计呢？为了搞清楚这个问题，我们需要了解编写前端页面都涉及哪些内容，具体如下：

• DOM 元素：例如是 div 标签还是 a 标签。
• 属性：如 a 标签的 href 属性，再如 id、class 等通用属性。
• 事件：如 click、keydown 等。
• 元素的层级结构：DOM 树的层级结构，既有子节点，又有父节点。

那么，如何声明式地描述上述内容呢？这是框架设计者需要思考的问题。其实方案有很多。拿 Vue.js 3 来说，相应的解决方案是：

• 使用与 HTML 标签一致的方式来描述 DOM 元素，例如描述一个 div 标签时可以使用
  ；
• 使用与 HTML 标签一致的方式来描述属性，例如
  ；
• 使用 : 或 v-bind 来描述动态绑定的属性，例如
  ；
• 使用 @ 或 v-on 来描述事件，例如点击事件
  ；
• 使用与 HTML 标签一致的方式来描述层级结构，例如一个具有 span 子节点的 div 标签
  。

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

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

01 const title = {
02   // 标签名称
03   tag: 'h1',
04   // 标签属性
05   props: {
06     onClick: handler
07   },
08   // 子节点
09   children: [
10     { tag: 'span' }
11   ]
12 }
1
2
3
4
5
6
7
8
9
10
11
12

对应到 Vue.js 模板，其实就是：

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

那么，使用模板和 JavaScript 对象描述 UI 有何不同呢？答案是：使用 JavaScript 对象描述 UI 更加灵活。举个例子，假如我们要表示一个标题，根据标题级别的不同，会分别采用 h1~h6 这几个标签，如果用 JavaScript 对象来描述，我们只需要使用一个变量来代表 h 标签即可：

01 // h 标签的级别
02 let level = 3
03 const title = {
04   tag: `h${level}`, // h3 标签
05 }
1
2
3
4
5

可以看到，当变量 level 值改变，对应的标签名字也会在 h1 和 h6 之间变化。但是如果使用模板来描述，就不得不穷举：

01 <h1 v-if="level === 1"></h1>
02 <h2 v-else-if="level === 2"></h2>
03 <h3 v-else-if="level === 3"></h3>
04 <h4 v-else-if="level === 4"></h4>
05 <h5 v-else-if="level === 5"></h5>
06 <h6 v-else-if="level === 6"></h6>
1
2
3
4
5
6

这远没有 JavaScript 对象灵活。而使用JavaScript 对象来描述 UI 的方式，其实就是所谓的虚拟 DOM。现在大家应该觉得虚拟 DOM 其实也没有那么神秘了吧。正是因为虚拟 DOM 的这种灵活性，Vue.js 3 除了支持使用模板描述 UI 外，还支持使用虚拟 DOM 描述 UI。其实我们在Vue.js 组件中手写的渲染函数就是使用虚拟 DOM 来描述 UI 的，如以下代码所示：

01 import { h } from 'vue'
02
03 export default {
04   render() {
05     return h('h1', { onClick: handler }) // 虚拟 DOM
06   }
07 }
1
2
3
4
5
6
7

有的读者可能会说，这里是 h 函数调用呀，也不是 JavaScript 对象啊。其实 h 函数的返回值就是一个对象，其作用是让我们编写虚拟 DOM 变得更加轻松。如果把上面 h 函数调用的代码改成JavaScript 对象，就需要写更多内容：

01 export default {
02   render() {
03     return {
04       tag: 'h1',
05       props: { onClick: handler }
06     }
07   }
08 }
1
2
3
4
5
6
7
8

如果还有子节点，那么需要编写的内容就更多了，所以 h 函数就是一个辅助创建虚拟 DOM 的工具函数，仅此而已。另外，这里有必要解释一下什么是组件的渲染函数。一个组件要渲染的内容是通过渲染函数来描述的，也就是上面代码中的 render 函数，Vue.js 会根据组件的 render 函数的返回值拿到虚拟 DOM，然后就可以把组件的内容渲染出来了。

2、渲染器

现在我们已经了解了什么是虚拟 DOM，它其实就是用 JavaScript 对象来描述真实的 DOM 结构。那么，虚拟 DOM 是如何变成真实 DOM 并渲染到浏览器页面中的呢？这就用到了我们接下来要介绍的：渲染器。

渲染器的作用就是把虚拟 DOM 渲染为真实DOM：

渲染器是非常重要的角色，大家平时编写的 Vue.js 组件都是依赖渲染器来工作的，因此后面我们会专门讲解渲染器。不过这里有必要先初步认识渲染器，以便更好地理解 Vue.js 的工作原理。

假设我们有如下虚拟 DOM：

01 const vnode = {
02   tag: 'div',
03   props: {
04     onClick: () => alert('hello')
05   },
06   children: 'click me'
07 }
1
2
3
4
5
6
7

首先简单解释一下上面这段代码：

• tag 用来描述标签名称，所以 tag: ‘div’ 描述的就是一个
  标签。
• props 是一个对象，用来描述
  标签的属性、事件等内容。可以看到，我们希望给 div 绑定一个点击事件。
• children 用来描述标签的子节点。在上面的代码中，children 是一个字符串值，意思是 div 标签有一个文本子节点：
  click me

实际上，你完全可以自己设计虚拟 DOM 的结构，例如可以使用 tagName 代替 tag，因为它本身就是一个 JavaScript 对象，并没有特殊含义。

接下来，我们需要编写一个渲染器，把上面这段虚拟 DOM 渲染为真实 DOM：

01 function renderer(vnode, container) {
02   // 使用 vnode.tag 作为标签名称创建 DOM 元素
03   const el = document.createElement(vnode.tag)
04   // 遍历 vnode.props，将属性、事件添加到 DOM 元素
05   for (const key in vnode.props) {
06     if (/^on/.test(key)) {
07       // 如果 key 以 on 开头，说明它是事件
08       el.addEventListener(
09         key.substr(2).toLowerCase(), // 事件名称 onClick ---> click
10         vnode.props[key] // 事件处理函数
11       )
12     }
13   }
14
15   // 处理 children
16   if (typeof vnode.children === 'string') {
17     // 如果 children 是字符串，说明它是元素的文本子节点
18     el.appendChild(document.createTextNode(vnode.children))
19   } else if (Array.isArray(vnode.children)) {
20     // 递归地调用 renderer 函数渲染子节点，使用当前元素 el 作为挂载点
21     vnode.children.forEach(child => renderer(child, el))
22   }
23
24   // 将元素添加到挂载点下
25   container.appendChild(el)
26 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

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

接下来，我们可以调用 renderer 函数：

01 renderer(vnode, document.body) // body 作为挂载点
1

在浏览器中运行这段代码，会渲染出“click me”文本，点击该文本，会弹出 alert(‘hello’)，如下图所示：

现在我们回过头来分析渲染器 renderer 的实现思路，总体来说分为三步：

• 创建元素：把 vnode.tag 作为标签名称来创建DOM 元素。
• 为元素添加属性和事件：遍历 vnode.props 对象，如果 key 以 on 字符开头，说明它是一个事件，把字符 on 截取掉后再调用 toLowerCase 函数将事件名称小写化，最终得到合法的事件名称，例如 onClick 会变成 click，最后调用addEventListener 绑定事件处理函数。
• 处理 children：如果 children 是一个数组，就递归地调用 renderer 继续渲染，注意，此时我们要把刚刚创建的元素作为挂载点（父节点）；如果children 是字符串，则使用 createTextNode 函数创建一个文本节点，并将其添加到新创建的元素内。

怎么样，是不是感觉渲染器并没有想象得那么神秘？其实不然，别忘了我们现在所做的还仅仅是创建节点，渲染器的精髓都在更新节点的阶段。假设我们对 vnode 做一些小小的修改：

01 const vnode = {
02   tag: 'div',
03   props: {
04     onClick: () => alert('hello')
05   },
06   children: 'click again' // 从 click me 改成 click again
07 }
1
2
3
4
5
6
7

对于渲染器来说，它需要精确地找到 vnode 对象的变更点并且只更新变更的内容。就上例来说，渲染器应该只更新元素的文本内容，而不需要再走一遍完整的创建元素的流程。这些内容后文会重点讲解，但无论如何，希望大家明白，渲染器的工作原理其实很简单，归根结底，都是使用一些我们熟悉的 DOM 操作 API 来完成渲染工作。

3、组件的本质

我们已经初步了解了虚拟 DOM 和渲染器，知道了虚拟 DOM 其实就是用来描述真实 DOM 的普通 JavaScript 对象，渲染器会把这个对象渲染为真实 DOM 元素。那么组件又是什么呢？组件和虚拟 DOM 有什么关系？渲染器如何渲染组件？接下来，我们就来讨论这些问题。

其实虚拟 DOM 除了能够描述真实 DOM 之外，还能够描述组件。例如使用 { tag: ‘div’ } 来描述

01 const MyComponent = function () {
02   return {
03     tag: 'div',
04     props: {
05       onClick: () => alert('hello')
06     },
07     children: 'click me'
08   }
09 }
1
2
3
4
5
6
7
8
9

01 const vnode = {
02   tag: MyComponent
03 }
1
2
3

01 function renderer(vnode, container) {
02   if (typeof vnode.tag === 'string') {
03     // 说明 vnode 描述的是标签元素
04     mountElement(vnode, container)
05   } else if (typeof vnode.tag === 'function') {
06     // 说明 vnode 描述的是组件
07     mountComponent(vnode, container)
08   }
09 }
1
2
3
4
5
6
7
8
9

01 function mountElement(vnode, container) {
02   // 使用 vnode.tag 作为标签名称创建 DOM 元素
03   const el = document.createElement(vnode.tag)
04   // 遍历 vnode.props，将属性、事件添加到 DOM 元素
05   for (const key in vnode.props) {
06     if (/^on/.test(key)) {
07       // 如果 key 以字符串 on 开头，说明它是事件
08       el.addEventListener(
09         key.substr(2).toLowerCase(), // 事件名称 onClick ---> click
10         vnode.props[key] // 事件处理函数
11       )
12     }
13   }
14
15   // 处理 children
16   if (typeof vnode.children === 'string') {
17     // 如果 children 是字符串，说明它是元素的文本子节点
18     el.appendChild(document.createTextNode(vnode.children))
19   } else if (Array.isArray(vnode.children)) {
20     // 递归地调用 renderer 函数渲染子节点，使用当前元素 el 作为挂载点
21     vnode.children.forEach(child => renderer(child, el))
22   }
23
24   // 将元素添加到挂载点下
25   container.appendChild(el)
26 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

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 }
1
2
3
4
5
6
7
8
9
10
11
12

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 }
1
2
3
4
5
6
7

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

01 <div @click="handler">
02   click me
03 </div>
1
2
3

01 render() {
02   return h('div', { onClick: handler }, 'click me')
03 }
1
2
3

01 <template>
02   <div @click="handler">
03     click me
04   </div>
05 </template>
06
07 <script>
08 export default {
09   data() {/* ... */},
10   methods: {
11     handler: () => {/* ... */}
12   }
13 }
14 </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14