今天终于把 Vue 编译的原理搞懂了!

大家好,我是哈默。今天我们来学习一下 vue3 中是如何去编译我们写在 template 中的模板的。

Vue 编译器的目标

我们首先来宏观地看一下 Vue 编译的流程。

首先,Vue 编译器的输入是很明确的,就是我们写在 <template></template> 中的模板,例如:

js 复制代码
<template>
  <div>我是哈默</div>
</template>

那么输出是什么呢?

我们可以定义一个 Demo 组件来看下:

Demo 组件:

vue 复制代码
<template>
  <div>我是哈默</div>
</template>

在 App 组件中引入 Demo 组件,然后打印 import 进来的 Demo 变量:

vue 复制代码
<template>
  <div>
    <Demo />
  </div>
</template>

<script setup>
import Demo from "./components/Demo.vue";
console.log("我是Demo组件", Demo);
</script>

打印结果:

可以看到,最终,我们的组件就是一个对象,里面包含了一个 render 函数,这个 render 函数里的内容,就是我们写在 template 中的内容。

所以,Vue 编译器的作用,就是把组件的 template 模板,编译成 render 函数,最后通过 render 函数来渲染组件。

编译的流程

明确了编译的目标之后,我们再来看下编译的流程是怎么样的。

整个 Vue 编译的流程主要分成 3 步:

  1. 根据 template,生成 AST 抽象语法树
  2. 将 AST 转化为 JavaScript AST
  3. 根据 JavaScript AST 生成 render 函数

第一步:根据 template,生成 AST

在 Vue 源码中,它是通过 parse 方法来解析我们的模板的:

js 复制代码
const ast = parse(template);

假如我们有这样的一个模板:

js 复制代码
<div>我是哈默</div>

生成的 AST,有 60 多行:

可以看出:

  1. AST 就是个对象
  2. AST 里面包含了很多的属性来描述我们的模板

所以,我们可以对生成的 AST 进行简化:

js 复制代码
const ast = {
  type: 0, // 根节点
  children: [
    {
      type: 1, // DOM 节点
      tag: "div",
      tagType: 0,
      props: [],
      children: [
        {
          type: 2, // 文本节点
          content: "我是哈默",
        },
      ],
    },
  ],
};

可以看到,这里通过了一些属性,描述了我们模板的信息。

第二步:将 AST 转化为 JavaScript AST

有了 AST 之后,我们还不能直接生成 render 函数,还需要将 AST 转化成为 JavaScript AST 才行。

那么,JavaScript AST 和 AST 有什么不同呢?

首先 Vue 内部会通过一个 transform 方法来进行 AST -> JavaScript AST 的转化:

js 复制代码
transform(
  ast,
  extend({}, options, {
    prefixIdentifiers,
    nodeTransforms: [
      ...nodeTransforms,
      ...(options.nodeTransforms || []), // user transforms
    ],
    directiveTransforms: extend(
      {},
      directiveTransforms,
      options.directiveTransforms || {} // user transforms
    ),
  })
);

然后我们再来看一下实际情况,还是我们上面的模板:

js 复制代码
<div>我是哈默</div>

生成的 JavaScript AST,用绿色的 + 表示比 AST 多出的部分:

diff 复制代码
const ast = {
  type: 0,
  children: [
    {
      type: 1,
      tag: "div",
      tagType: 0,
      props: [],
      children: [
        {
          type: 2,
          content: "我是哈默",
        },
      ],
+     codegenNode: {
+       type: 13,
+       tag: '"div"',
+       children: {
+         type: 2,
+         content: "我是哈默",
+       },
+       isBlock: true,
+       disableTracking: false,
+       isComponent: false,
+     },
    },
  ],
+ codegenNode: {
+   type: 13,
+   tag: '"div"',
+   children: {
+     type: 2,
+     content: "我是哈默",
+   },
+   isBlock: true,
+   disableTracking: false,
+   isComponent: false,
+ },
};

我们的 JavaScript AST 会比 AST 多出一块 codegenNode 属性,这个属性是 代码生成节点,在生成 render 函数的时候,我们就会用到这个属性的值。

所以,我们这里面转化成 JavaScript AST 最重要的目的,就是为了得到这个 codegenNode

根据 JavaScript AST 生成 render 函数

有了 JavaScript AST 以后,我们就可以通过一个 generate 函数来生成 render 函数了!

Vue 源码中:

js 复制代码
const renderFn = generate(
  ast,
  extend({}, options, {
    prefixIdentifiers,
  })
);

generate 函数:

js 复制代码
export function generate(ast, options) {
  ...

  const context = {
    code: '', // 生成的 render 函数,用字符串表示了出来
    push(code) {
      cotext.code += code // 使用字符串拼接的形式,拼接出了最终的 render 函数
    }
  }

  if (ast.codegenNode) {
    // genNode 里会使用 context.push 拼接 render 函数
    genNode(ast.codegenNode, context);  // <- 使用了 codegenNode
  } else {
    push(`null`);
  }

  ...

  return {
    code: context.code, // 生成的 render 函数,用字符串表示了出来
  };
}

可以看到:

  1. 在 generate 函数中使用了我们第二步中生成的 codegenNode
  2. 我们的 render 函数其实就是个字符串,通过 context 的 push 方法拼接了出来,最终这个字符串会通过 new Function 转化成一个 render 函数。

最终,我们的 render 函数是长成这样:

js 复制代码
import {
  openBlock as _openBlock,
  createElementBlock as _createElementBlock,
} from "vue";

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return _openBlock(), _createElementBlock("div", null, "我是哈默");
}

总结

Vue 的编译过程主要就分成了三步,通过这三步,我们的模板就能转化成 render 函数,最终 Vue 会调用 render 函数,完成模板的渲染。

相关推荐
懒大王爱吃狼40 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
鱼跃鹰飞8 小时前
大厂面试真题-简单说说线程池接到新任务之后的操作流程
java·jvm·面试
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨9 小时前
VUE+Vite之环境文件配置及使用环境变量
前端