最近很火的Vue Vine是如何实现一个文件中写多个组件

2024-07-10 11:51:11

前言

在今年的Vue Conf 2024大会上，沈青川大佬（维护Vue/Vite 中文文档）在会上介绍了他的新项目Vue Vine。Vue Vine提供了全新Vue组件书写方式， 主要的卖点是可以在一个文件里面写多个vue组件 。相信你最近应该看到了不少介绍Vue Vine的文章，这篇文章我们另辟蹊径来讲讲Vue Vine是如何实现在一个文件里面写多个vue组件。

关注公众号：【前端欧阳】，给自己一个进阶vue的机会

看个demo

我们先来看普通的vue组件， about.vue 代码如下：

<template>
  <h3>i am about page</h3>
</template>

<script lang="ts" setup></script>

我们在浏览器中来看看编译后的js代码，代码如下：

const _sfc_main = {};

function _sfc_render(_ctx, _cache) {
  return _openBlock(), _createElementBlock("h3", null, "i am about page");
}

_sfc_main.render = _sfc_render;
export default _sfc_main;

从上面的代码可以看到普通的vue组件编译后生成的js文件会 export default 导出一个 _sfc_main 组件对象，并且这个组件对象上面有个大名鼎鼎的 render 函数。父组件只需要import导入子组件里面 export default 导出的 _sfc_main 组件对象就可以啦。

搞清楚普通的vue组件编译后是什么样的，我们接着来看一个Vue Vine的demo，Vue Vine的组件必须以 .vine.ts 结尾， home.vine.ts 代码如下：

async function ChildComp() {
  return vine`
    <h3>我是子组件</h3>
  `;
}

export async function Home() {
  return vine`
  <h3>我是父组件</h3>
    <ChildComp  />
  `;
}

如果你熟悉react，你会发现Vine 组件函数和react比较相似，不同的是return的时候需要在其返回值上显式使用 vine 标记的模板字符串。

在浏览器中来看看 home.vine.ts 编译后的代码，代码如下：

export const ChildComp = (() => {
  const __vine = _defineComponent({
    name: "ChildComp",
    setup(__props, { expose: __expose }) {
      // ...省略
    },
  });

  function __sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
    return _openBlock(), _createElementBlock("h3", null, "我是子组件");
  }

  __vine.render = __sfc_render;
  return __vine;
})();

export const Home = (() => {
  const __vine = _defineComponent({
    name: "Home",
    setup(__props, { expose: __expose }) {
      // ...省略
    },
  });

  function __sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
    return (
      _openBlock(),
      _createElementBlock(
        _Fragment,
        null,
        [_hoisted_1, _createVNode($setup["ChildComp"])],
        64,
      )
    );
  }

  __vine.render = __sfc_render;
  return __vine;
})();

从上面的代码可以看到组件 ChildComp 和 Home 编译后是一个立即调用函数，在函数中return了 __vine 组件对象，并且这个组件对象上面也有render函数。想必细心的你已经发现了在同一个文件里面定义的多个组件经过编译后，从常规的export default导出一个默认的vue组件对象变成了export导出多个具名的vue组件对象。

接下来我们将通过debug的方式带你搞清楚Vue Vine是如何实现一个文件内导出多个vue组件对象。

`createVinePlugin` 函数

我们遇见的第一个问题是需要找到从哪里开始着手debug？

来看一下官方文档是接入vue vine的，如下图：

从上图中可以看到vine是一个vite插件，以插件的形式起作用的。

现在我们找到了一切起源就是这个 VineVitePlugin 函数，所以我们需要给 vite.config.ts 文件中的 VineVitePlugin 函数打个断点。如下图：

接下来我们需要启动一个debug终端。这里以 vscode 举例，打开终端然后点击终端中的 + 号旁边的下拉箭头，在下拉中点击 Javascript Debug Terminal 就可以启动一个 debug 终端。

在debug终端执行 yarn dev ，在浏览器中打开对应的页面，比如： http://localhost:3333/ 。此时代码将会停留在我们打的断点 VineVitePlugin 函数调用处，让代码走进 VineVitePlugin 函数，发现这个函数实际定义的名字叫 createVinePlugin ，在我们这个场景中简化后的 createVinePlugin 函数代码如下：

function createVinePlugin() {
  return {
    name: "vue-vine-plugin",
    async resolveId(id) {
      // ...省略
    },
    async load(id) {
      // ...省略
    },
    async transform(code, id) {
      const { fileId, query } = parseQuery(id);
      if (!fileId.endsWith(".vine.ts") || query.type === QUERY_TYPE_STYLE) {
        return;
      }
      return runCompileScript(code, id);
    },
    async handleHotUpdate(ctx) {
      // ...省略
    }
  };
}

从上面的代码可以看到插件中有不少钩子函数， vite 会在对应的时候调用这些插件的钩子函数，比如当 vite 解析每个模块时就会调用 transform 等函数。

transform 钩子函数的接收的第一个参数为 code ，是当前文件的code代码字符串。第二个参数为id，是当前文件路径，这个路径可能带有query。

在 transform 钩子函数中先调用 parseQuery 函数根据当前文件路径拿到去除query的文件路径，以及query对象。

!fileId.endsWith(".vine.ts") 的意思是判断当前文件是不是 .vine.ts 结尾的文件，如果不是则不进行任何处理，这也就是为什么文档中会写Vue Vine只支持 .vine.ts 结尾的文件。

query.type === QUERY_TYPE_STYLE 的意思是判断当前文件是不是css文件，因为同一个vue文件会被处理两次，第一次处理时只会处理template和script这两个模块，第二次再去单独处理style模块。

在 transform 钩子函数的最后就是调用 runCompileScript(code, id) 函数，并且将其执行结果进行返回。

`runCompileScript` 函数

接着将断点走进 runCompileScript 函数，在我们这个场景中简化后的 runCompileScript 函数代码如下：

const runCompileScript = (code, fileId) => {
  const vineFileCtx = compileVineTypeScriptFile(
    code,
    fileId,
    compilerHooks,
    fileCtxMap,
  );

  return {
    code: vineFileCtx.fileMagicCode.toString(),
  };
};

从上面的代码可以看到首先会以 code （当前文件的code代码字符串）为参数去执行 compileVineTypeScriptFile 函数，这个函数会返回一个 vineFileCtx 上下文对象。这个上下文对象的 fileMagicCode.toString(), 就是前面我们在浏览器中看到的最终编译好的js代码。

`compileVineTypeScriptFile` 函数

接着将断点走进 compileVineTypeScriptFile 函数，在我们这个场景中简化后的 compileVineTypeScriptFile 函数代码如下：

function compileVineTypeScriptFile(
  code: string,
  fileId: string,
  compilerHooks: VineCompilerHooks,
  fileCtxCache?: VineFileCtx,
) {
  const vineFileCtx: VineFileCtx = createVineFileCtx(
    code,
    fileId,
    fileCtxCache,
  );
  const vineCompFnDecls = findVineCompFnDecls(vineFileCtx.root);
  doAnalyzeVine(compilerHooks, vineFileCtx, vineCompFnDecls);
  transformFile(
    vineFileCtx,
    compilerHooks,
    compilerOptions?.inlineTemplate ?? true,
  );

  return vineFileCtx;
}

在执行 compileVineTypeScriptFile 函数之前，我们在debug终端来看看接收的第一个参数 code ，如下图：

从上图中可以看到第一个参数 code 就是我们写的 home.vine.ts 文件中的源代码。

`createVineFileCtx` 函数

接下来看第一个函数调用 createVineFileCtx ，这个函数返回一个 vineFileCtx 上下文对象。将断点走进 createVineFileCtx 函数，在我们这个场景中简化后的 createVineFileCtx 函数代码如下：

import MagicString from 'magic-string'

function createVineFileCtx(code: string, fileId: string) {
  const root = babelParse(code);
  const vineFileCtx: VineFileCtx = {
    root,
    fileMagicCode: new MagicString(code),
    vineCompFns: [],
    // ...省略
  };
  return vineFileCtx;
}

由于Vue Vine中的组件和react相似是组件函数，组件函数中当然全部都是js代码。既然是js代码那么就可以使用babel的 parser 函数将组件函数的js代码编译成AST抽象语法树，所以第一步就是使用 code 去调用babel的 parser 函数生成AST抽象语法树，然后赋值给 root 变量。

我们在debug终端来看看得到的AST抽象语法树是什么样的，如下图：

从上图中可以看到在body数组中有两项，分别对应的就是 ChildComp 组件函数和 Home 组件函数。

接下来就是return返回一个 vineFileCtx 上下文对象，对象上面的几个属性我们需要讲一下。

root ：由 .vine.ts 文件转换后的AST抽象语法树。
vineCompFns ：数组中存了文件中定义的多个vue组件，初始化时为空数组。
fileMagicCode ：是一个由 magic-string 库new的一个对象，对象中存了在编译时生成的js代码字符串。

magic-string 是由svelte的作者写的一个库，用于处理字符串的 JavaScript 库。它可以让你在字符串中进行插入、删除、替换等操作，在编译时就是利用这个库生成编译后的js代码。

toString 方法返回经过处理后的字符串，前面的 runCompileScript 函数中就是最终调用 vineFileCtx.fileMagicCode.toString() 方法返回经过编译阶段处理得到的js代码。

`findVineCompFnDecls` 函数

我们接着来看 compileVineTypeScriptFile 函数中的第二个函数调用 findVineCompFnDecls ：

function compileVineTypeScriptFile(
  code: string,
  fileId: string,
  compilerHooks: VineCompilerHooks,
  fileCtxCache?: VineFileCtx,
) {
  // ...省略
  const vineCompFnDecls = findVineCompFnDecls(vineFileCtx.root);
  // ...省略
}

通过前一步我们拿到了一个 vineFileCtx 上下文对象， vineFileCtx.root 中存的是编译后的AST抽象语法树。

所以这一步就是调用 findVineCompFnDecls 函数从AST抽象语法树中提取出在 .vine.ts 文件中定义的多个vue组件对象对应的Node节点。我们在debug终端来看看组件对象对应的Node节点组成的数组 vineCompFnDecls ，如下图：

从上图中可以看到数组由两个Node节点组成，分别对应的是 ChildComp 组件函数和 Home 组件函数。

`doAnalyzeVine` 函数

我们接着来看 compileVineTypeScriptFile 函数中的第三个函数调用 doAnalyzeVine ：

function compileVineTypeScriptFile(
  code: string,
  fileId: string,
  compilerHooks: VineCompilerHooks,
  fileCtxCache?: VineFileCtx,
) {
  // ...省略
  doAnalyzeVine(compilerHooks, vineFileCtx, vineCompFnDecls);
  // ...省略
}

经过上一步的处理我们拿到了两个组件对象的Node节点，并且将这两个Node节点存到了 vineCompFnDecls 数组中。

由于组件对象的Node节点是一个标准的AST抽象语法树的Node节点，并不能清晰的描述一个vue组件对象。所以接下来就是调用 doAnalyzeVine 函数遍历组件对象的Node节点，将其转换为能够清晰的描述一个vue组件的对象，将这些vue组件对象组成数组塞到 vineFileCtx 上下文对象的 vineCompFns 属性上。

我们在debug终端来看看经过 doAnalyzeVine 函数处理后生成的 vineFileCtx.vineCompFns 属性是什么样的，如下图：

从上图中可以看到 vineCompFns 属性中存的组件对象已经能够清晰的描述一个vue组件，上面有一些我们熟悉的属性 props 、 slots 等。

`transformFile` 函数

我们接着来看 compileVineTypeScriptFile 函数中的第四个函数调用 transformFile ：

function compileVineTypeScriptFile(
  code: string,
  fileId: string,
  compilerHooks: VineCompilerHooks,
  fileCtxCache?: VineFileCtx,
) {
  // ...省略
  transformFile(
    vineFileCtx,
    compilerHooks,
    compilerOptions?.inlineTemplate ?? true,
  );
  // ...省略
}

经过上一步的处理后在 vineFileCtx 上下文对象的 vineCompFns 属性数组中已经存了一系列能够清晰描述vue组件的对象。

在前面我们讲过了 vineFileCtx.vineCompFns 数组中存的对象能够清晰的描述一个vue组件，但是对象中并没有我们期望的render函数、setup函数等。

所以接下来就需要调用 transformFile 函数，遍历上一步拿到的 vineFileCtx.vineCompFns 数组，将所有的vue组件转换成对应的立即调用函数。在每个立即调用函数中都会return一个 __vine 组件对象，并且这个 __vine 组件对象上都有一个render属性。

之所以包装成一个立即调用函数，是因为每个组件都会生成一个名为 __vine 组件对象，所以才需要立即调用函数将作用域进行隔离。

我们在debug终端来看看经过 transformFile 函数处理后拿到的js code代码字符串，如下图：

从上图中可以看到此时的js code代码字符串已经和我们之前在浏览器中看到的编译后的代码一模一样了。

总结

Vue Vine是一个vite插件，vite解析每个模块时都会触发插件的 transform 钩子函数。在钩子函数中会去判断当前文件是否以 .vine.ts 结尾的，如果不是则return。

在 transform 钩子函数中会去调用 runCompileScript 函数， runCompileScript 函数并不是实际干活的地方，而是去调用 compileVineTypeScriptFile 函数。

在 compileVineTypeScriptFile 函数中先new一个 vineFileCtx 上下文对象，对象中的 root 属性存了由 .vine.ts 文件转换成的AST抽象语法树。

接着就是调用 findVineCompFnDecls 函数从AST抽象语法树中找到组件对象对应的Node节点。

由于Node节点并不能清晰的描述一个vue组件，所以需要调用 doAnalyzeVine 函数将这些Node节点转换成能够清晰描述vue组件的对象。

最后就是遍历这些vue组件对象将其转换成立即调用函数。在每个立即调用函数中都会return一个 __vine 组件对象，并且这个 __vine 组件对象上都有一个render属性。

关注公众号：【前端欧阳】，给自己一个进阶vue的机会

标签：游戏攻略

最近很火的Vue Vine是如何实现一个文件中写多个组件

前言

看个demo

`createVinePlugin` 函数

`runCompileScript` 函数

`compileVineTypeScriptFile` 函数

`createVineFileCtx` 函数

`findVineCompFnDecls` 函数

`doAnalyzeVine` 函数

`transformFile` 函数

总结

疯米耳机

小寻儿童电话手表

飞卢中文网

飞卢小说安卓版

人类帮派涂地

摸鱼kik

像素求生世界

金鱼嘴每日路演活动社区

龙与家园：时光 2024最新版

小小追书正版免费

艾维奇重力手机版

地铁逃生国际服最新版本下载

隔空操作最新版

微米浏览器免费版

腾讯先锋云游戏秒玩

爸爸的面馆破解版无限金币免广告 v5.3.10 安卓版

疯米耳机

小寻儿童电话手表

飞卢中文网

飞卢小说安卓版

摸鱼kik

疯米耳机

小寻儿童电话手表

飞卢中文网

飞卢小说安卓版

摸鱼kik

最近很火的Vue Vine是如何实现一个文件中写多个组件

前言

看个demo

createVinePlugin 函数

runCompileScript 函数

compileVineTypeScriptFile 函数

createVineFileCtx 函数

findVineCompFnDecls 函数

doAnalyzeVine 函数

transformFile 函数

总结

`createVinePlugin` 函数

`runCompileScript` 函数

`compileVineTypeScriptFile` 函数

`createVineFileCtx` 函数

`findVineCompFnDecls` 函数

`doAnalyzeVine` 函数

`transformFile` 函数