阅读《Vue.js设计与实现》 -- 03

接上一篇：阅读《Vue.js设计与实现》 -- 02

第三章

本章菜鸟读完，感觉就是讲了两个事：

• h函数就是一个辅助创建虚拟 DOM 的工具函数 ，让我们创建虚拟DOM更加简单，拨开了第一章中提到的虚拟dom的神秘面纱，其实虚拟dom就是一个使用 JavaScript 对象来描述 UI 的方式

• 渲染器（render函数）是怎么从能解析对象到能解析组件的过程

声明式地描述 UI

编写前端界面会涉及的内容

vue3是这样完成声明式的

上述对应的 vue.js 类似：

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

除了上述的方法，还能用 JavaScript 对象来描述 UI！

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

使用模板和 JavaScript 对象描述 UI 有何不同呢？

答案是：使用 JavaScript 对象描述 UI 更加灵活。即：可以通过循环、变量、判断等描述UI，不会像模板那样全部枚举出来！

例如：我们要表示一个标题，根据标题级别的不同，会分别采用 h1~h6 这几个标签。

用 JavaScript 对象描述可以写为：

// h 标签的级别
let level = 3;
const title = {
  tag: `h${level}` // h3 标签
};

如果是模板就需要：

<h1 v-if="level === 1"></h1>
<h2 v-else-if="level === 2"></h2>
<h3 v-else-if="level === 3"></h3>
<h4 v-else-if="level === 4"></h4>
<h5 v-else-if="level === 5"></h5>
<h6 v-else-if="level === 6"></h6>

通过 JavaScript 对象来描述 UI，就是虚拟DOM！

在 vue.js 组件中，手写的渲染函数就是使用虚拟 DOM 来描述 UI 的：

import { h } from 'vue'

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

这里h函数内部做了处理，传进去的东西，会被处理成js描述对象（虚拟dom），然后交给render函数去渲染UI！

如果上面的代码不用h函数，而是用js对象的话，那么其复杂度比较高（有子节点就更复杂）：

export default {
  render() {
    return {
      tag: "h1",
      props: { onClick: handler }
    };
  }
};

h函数的目的就是让我们编写虚拟dom更加容易！h函数就是一个辅助创建虚拟 DOM 的工具函数，仅此而已。

初识渲染器

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

那怎么把js对象渲染成真实DOM？编写如下代码：

const vnode = {
  // 标签名称
  tag: "h1",
  // 属性
  props: {
    onClick: () => {
      alert("你好");
    }
  },
  // 子节点
  children: "Hello World"
};

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 渲染到该挂载点下

运行函数

let home = document.querySelector("#content");
renderer(vnode, home)

结果

但是渲染器的作用并不只是渲染而已，更重要的是发现元素的变化，并将对应的地方重新渲染，而不需要再走一遍完整的创建元素的流程！ --> 后续会讲，暂时没深入

组件的本质

虚拟 DOM 除了能够描述真实 DOM 之外，还能够描述组件。因为组件其实就是一组真实 DOM 的集合体，这组 DOM 元素就是组件要渲染的内容，因此我们可以定义一个函数来代表组件，而函数的返回值就代表组件要渲染的内容!

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

注意

返回的是虚拟DOM对象 --> 下一节才会讲怎么渲染模板！

然后可以将 tag 设置为 MyComponent，只不过此时的 tag 属性不是标签名称，而是组件函数。为了能够渲染组件，需要渲染器的支持，修改 renderer 函数：

function renderer(vnode, container) {
  if (typeof vnode.tag === "string") {
    // 说明 vnode 描述的是标签元素
    mountElement(vnode, container); // --> 之前写的 renderer 函数
  } else if (typeof vnode.tag === "function") {
    // 说明 vnode 描述的是组件
    mountComponent(vnode, container);
  }
}

现在要做的就是写一个mountComponent方法了：

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

一定要函数吗？

组件一定得是函数吗？我们完全可以使用一个 JavaScript 对象来表达组件:

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

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

function renderer(vnode, container) {
  if (typeof vnode.tag === "string") {
    // 没变
    mountElement(vnode, container);
  } else if (typeof vnode.tag === "object") {
    // 使用对象而不是函数来表达组件
    mountComponent(vnode, container);
  }
}

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

模板的工作原理

无论是手写虚拟 DOM（渲染函数）还是使用模板，都属于声明式地描述 UI，并且 Vue.js 同时支持这两种描述 UI 的方式。

我们讲解了虚拟 DOM 是如何渲染成真实 DOM 的，那么模板是如何工作的呢？这就要提到 Vue.js 框架中的另外一个重要组成部分：编译器。

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

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

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

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

我们熟悉的.vue文件：

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

<script>
export default {
  data() {
    /* ... */
  },
  methods: {
    handler: () => {
      /* ... */
    }
  }
};
</script>

其中 template 标签里的内容就是模板内容，编译器会把模板内容编译成渲染函数并添加到 script 标签块的组件对象上，所以最终在浏览器里运行的代码就是：

export default {
  data() {
    /* ... */
  },
  methods: {
    handler: () => {
      /* ... */
    }
  },
  render() {
    return h("div", { onClick: handler }, "click me");
  }
};

至于是咋编辑成这样的，这里暂时没说！

无论是使用模板还是直接手写渲染函数，对于一个组件来说，它要渲染的内容最终都是通过渲染函数产生的，然后渲染器再把渲染函数返回的虚拟 DOM 渲染为真实 DOM，这就是模板的工作原理，也是 Vue.js 渲染页面的流程。