前言
在今年的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>
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的机会