• 【Vue.js设计与实现】第3章 Vue.js 3 的设计思路

    前言：

            本文是我看的Vue.js设计与实现这本书第一篇 框架设计概览 的第3章 Vue.js 3 的设计与思路的一些总结与收获。

            第一篇 框架设计概览 有三个章节：权衡的艺术、框架设计的核心要素、Vue.js 3 的设计思路。在第1章中，讲的是框架设计是权衡的艺术，里面存在着取舍，例如性能与可维护性之间的取舍、运行时与编译时之间的取舍等。在第2章中，讲的是框架设计的几个核心要素；第3章中，主要是Vue.js 3 的设计思路、工作机制和重要的组成部分，还有各个模块之间是如何协作之类的。

    第3章 Vue.js 3 的设计与实现

    3.1 声明式地描述UI

            我们已经知道Vue.js3是一个声明式的UI框架，如果让我们设计一个声明式的UI框架，我们怎么设计呢？像DOM元素，属性，事件，元素的层级结构等；怎么声明式描述？

            Vue.js 3相应解决：DOM元素和属性的话跟HTML标签一致；动态绑定属性的话则是使用:或v-bind来描述；事件用@或v-on来描述事件；层级结构也适合HTML标签一致。

            之后除了上面声明式描述UI，还可以用Javascript对象来描述。使用Javascript对象描述UI更加灵活。而使用Javascript对象描述UI的方式，其实就是所谓的虚拟DOM。

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

    1. import {h} from 'vue'
    2.  
    3. export default {
    4.     render() {
    5.         return h('h1',{ onClick: handler }) //虚拟DOM
    6.     }
    7. }

            Vue.js会根据组件的render函数的返回值拿到虚拟DOM，然后就可以把组件的内容渲染出来了。

    3.2 初始渲染器

            我们已经了解到虚拟DOM就是用Javascript对象来描述真实的DOM结构。

            而虚拟DOM怎么变成真实DOM渲染到浏览器的：渲染器。

            渲染器的作用就是把虚拟DOM渲染为真实DOM，渲染器renderer的实现思路分三步：创建元素、为元素添加属性和事件、处理children。渲染器的实现原理其实很简单，都是使用一些我们使用一些我们熟悉的DOM操作API来完成渲染工作。它的精髓主要在更新节点的阶段。

    3.3 组件的本质

            我们知道了虚拟DOM是描述真实DOM的普通Javascript对象，渲染器会把这个对象渲染为真实DOM元素。那么组件又是什么呢？组件和虚拟DOM有什么关系？渲染器如何渲染组件？

            其实虚拟DOM除了能够描述真实DOM，还能描述组件。组件并不是真实DOM元素，一句话总结：组件就是一组DOM元素的封装，这组DOM元素就是组件要渲染的内容，因为我们可以定义一个函数来代表组件，而函数的返回值就代表组件要渲染的内容。

            可知，组件的返回值也是虚拟DOM，它代表组件要渲染的内容。

    3.4 模板的工作原理

            无论是手写虚拟DOM还是使用模板，都属于声明式地描述UI，我们知道虚拟DOM是通过渲染器渲染成真实DOM的。那模板如何工作的？

            这就要提到Vue.js框架中的另一个重要组成部分：编译器。

            编译器的作用其实就是将模板编译为渲染函数。

            对于