Vue3 源码分析 03 - vue3的设计思路，原来渲染器，编译器是这个意思，他们是干这个的！

大家也可以去我的博客看相关技术文章，欢迎大家，一同进步！！！！

• Vue3 源码分析 01 - 权衡的艺术
• Vue3 源码分析 02 - 框架设计的核心要素
• Vue3 源码分析 03 - vue3的设计思路

vue3 源码分析，第二章 vue3的设计思路

目录

声明式的描述UI

声明式的描述UI有两种方式

模板 template

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

JavaScript 对象 （虚拟dom）

const title = {
  tag: "h1",
  props: {
    onClick: handler,
  },
  children: [{ tag: "span" }],
};

有啥区别？模板没有JS对象灵活，可以看下下面的场景

let level = 3;
const title = {
  tag: `h${level}`,
};

补充1: h函数，编写虚拟dom更加方便的工具函数

import { h } from "vue";

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

关于h函数，这里我们简单说明下：

• h函数就是用来描述UI的，他也属于JS描述UI这一类
• 所以h函数就是一个辅助创建虚拟DOM的工具函数

补充2: 渲染函数

• 一个组件要渲染的内容是通过渲染函数来描述的
• 渲染函数render的返回值就是使用JS描述的UI，也就是虚拟DOM

渲染器

我们有了声明式描述UI的方式，采用虚拟dom，即JS的方式，那么虚拟DOM如何变成真正的DOM呢？

• 渲染器 （虚拟DOM => 渲染器 => 真实DOM）

渲染器的作用

可以暂时不关心渲染器的内部实现，抽象的看，它就是这样的

function renderer(vnode, container) {
  // ...
}

• vnode 虚拟DOM对象，container，一个真实的DOM元素

所以：渲染器只做一件事情，就是把虚拟DOM渲染成真实的DOM，并挂载到对应节点上

组件的本质

• 本质：组件就是一组DOM元素的封装，也使用虚拟DOM描述

• 这组DOM元素就是组件要渲染的内容

• 组件可以是用函数，也可以是对象，只要是一组DOM的描述即可

有了组件，那么渲染器针对组件就要做能力的增强，支持渲染组件，抽象的看

function renderer(vnode, container) {
  if (typeof vnode.tag === "string") {
    mountElement(vnode, container);
  } else if (typeof vnode.tage === "function") {
    // 组件
    mountComponent(vnode, container);
  }
}

模板的工作原理

其实模板很好理解，模板和编译器相关

• 模板(template) => 编译器 => 渲染函数（模板里内容就在render）
• 渲染函数执行 => 虚拟DOM
• 虚拟DOM => 渲染器 => 真实DOM

总结

• 描述UI的两种 模板、JS（虚拟DOM）
• 渲染器，渲染器的作用就是 （虚拟DOM => 渲染器 => 真实DOM）
• 组件 - 一组虚拟DOM的封装，而这组虚拟DOM就是组件需要渲染的
• 编译器，编译器将模板编译为渲染函数