深入解析Vue文件如何被转换并渲染到页面的全过程-七爪网

在Vue组件的开发过程中，我们时常希望便捷地运用Vue自带的强大功能，比如对Vue文件的编译操作。这一过程关联着众多知识点，掌握这些知识有助于我们更深入地理解Vue相关工具的运作机制，从而获得极大的益处。

初始状态：不使用Vue文件的Vue用法

不依赖Vue文件而运用Vue，这算是一种原始做法。这种方式能帮助我们理解Vue的基础运作原理。以早期的Vue项目为例，不少开发者便是在HTML文件中直接应用Vue实例来搭建页面。尤其在一些小规模项目中，比如个人开发者本地开发的环境，或是Vue初学者，这种方法尚能应付。不过，随着项目变得复杂，这种方法就显得不够用了。这时，VueSFC的优势便显现出来，它使得组件的创建和管理变得更加有序和模块化。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/vue@next"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
<script>
    const Counter = {
        data() {
            return {
                counter: 0
            }
        },
        render(){
            return Vue.h('h1','hello-world')
        }
    }
    Vue.createApp(Counter).mount('#app')
</script>
</html>

深入解析Vue文件如何被转换并渲染到页面的全过程

换个角度来想，若不用Vue文件，编写功能时代码会显得杂乱无章。尤其是在大型项目里，多人合作时，若缺乏这种模块化管理，便可能遇到代码维护难题和逻辑上的混乱。此外，代码复用性也会大大降低。

VueSFC编译基础

import { readFile, writeFile } from "fs-extra";
const file = await readFile("./src/main.vue", "utf8");

import { parse } from "@vue/compiler-sfc";
const { descriptor, error } = parse(file);

Vue单文件组件将组件内容集中在一个文件中，当组件被调用时，需要将其转换成JavaScript对象形式的Vue组件。这个过程相当于将原材料加工成成品。以一个常见的Vue文件为例，在项目初期开发阶段，开发者需要进行编译。编译过程中，会将Vue文件中的模板、脚本、样式等部分分别转换为JavaScript代码，再将它们组合成一个Vue对象，以便浏览器执行。这个阶段的处理主要是将内容分割成不同的模块。比如在我的本地项目中，解析时内容的结构会与Vue文件保持一致。

<template>
  <div class="message">{{ message }}</div>
</template>
<script>
import { ref } from "vue";
export default {
  name: "Main",
  setup() {
    const message = ref("Main");
    return {
      message,
    };
  },
};
</script>
<style scoped>
.message {
  font-size: 60px;
  font-weight: 900;
}
</style>

此外，Vue文件若出现setup函数或css变量注入等特殊状况，编译出的代码便会发生改变。主文件中对于这两种情况的处理方式各异，进而使得运行时的最终文件出现差异。开发者在处理这类较为复杂的功能模块时，必须格外留意。

深入解析Vue文件如何被转换并渲染到页面的全过程

组件展示到页面的基础工作

拿到编译好的函数组合，我们就能在页面上展示组件了。暂时不考虑样式，先确保组件能成功渲染。这在项目初期功能测试时非常有帮助。比如，我在制作用户登录组件时，首先要确保它能成功显示在页面上。有时，我们可能会遇到一些技术或函数问题，使得组件无法存储在变量里，进而无法为Vue组件设置特定函数。这些问题都需要我们在实际开发中逐一解决。

这样做只能先看到组件呈现的效果，但界面整体完成度尚不充分。我们还需调整样式，确保组件在页面上呈现出理想的视觉效果。这还与用户的使用感受紧密相连。

import { compileScript } from "@vue/compiler-sfc";
// 这个 id 是 scopeId，用于 css scope，保证唯一即可
const id = Date.now().toString();
const scopeId = `data-v-${id}`;
// 编译 script，因为可能有 script setup，还要进行 css 变量注入
const script = compileScript(descriptor, { id: scopeId });

样式处理的复杂性

深入解析Vue文件如何被转换并渲染到页面的全过程

Vue的样式应用不仅仅是CSS，还可能涉及less、sass等语法。这导致样式处理变得更加复杂。项目在不同发展阶段，面对不同需求，我们需依据样式语法挑选恰当的预处理器和后处理器。例如，在时尚购物项目中，为了达到炫目的页面效果，可能会采用sass。在样式处理中，运用scope进行样式隔离极为关键，目的是防止样式波及全局，具体来说，就是为函数提供如[data-v-68]这类选择器的值。这个过程涉及诸多环节，每一步都需谨慎操作。

import { ref } from "vue";
export default {
  name: "Main",
  setup() {
    const message = ref("Main");
    return {
      message,
    };
  },
};

而且，不同项目对设计风格的需求各不相同。有的项目偏好简约风格，而有的则更注重丰富的交互和视觉呈现，这无疑给设计工作带来了多样的挑战。

import { compileTemplate } from "@vue/compiler-sfc";
// 编译模板，转换成 render 函数
const template = compileTemplate({
  source: descriptor.template.content,
  filename: "main.vue", // 用于错误提示
  id: scopeId,
});

手动编译处理流程

深入解析Vue文件如何被转换并渲染到页面的全过程

从基础的Vue文件入手，我们通过@vue的-sfc指令逐步进行编译。这一过程涉及对模板、脚本和样式的分别处理，再将它们整合，最终完成打包。这一过程相当细致。以实际的项目开发为例，在一家初创公司开发新的web应用时，便实际体验了这一系列步骤。开发人员需按部就班地逐个编译，若任一环节出现故障，都可能使得浏览器中的最终运行结果出错。整个过程宛如一条生产线，每个环节都至关重要，不容有失。

import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
const _hoisted_1 = { class: "message" }
export function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("div", _hoisted_1, _toDisplayString(_ctx.message), 1 /* TEXT */))
}

而且，若某个步骤出了差错，要查找并解决问题，就得对Vue的编译过程有透彻的了解。这包括对文件组织结构和编译机制都要了如指掌，如此一来，才能迅速找到问题的根源并加以解决。

与Vite处理过程对比

// 将 script 保存到 main.vue.script.js，拿到的是 Vue 对象
import script from '/src/main.vue.script.js'
// 将 render 函数保存到 main.vue.template.js，拿到的是 render 函数
import { render } from '/src/main.vue.template.js'
// 将 style 函数保存到 main.vue.style.js，import 之后就直接创建  标签了
// 这个先不加，style 还没编译
// import '/src/main.style.template.js'
// 给 Vue 对象设置 render 函数
script.render = render
// 设置一些组件的信息，用于开发环境
script.__file = 'example.vue'
script.__scopeId = 'xxxxxx'
// 这里可以加入其它代码，例如热更新
export default script

Vue文件的处理方式与人工操作颇为相似。然而，Vite引入了多项实用功能，例如支持热更新、编译缓存以及模块拆分等。在大型企业级项目中，这些功能显著提高了工作效率。以在线教育平台项目为例，热更新功能能让开发者迅速查看代码变更后的效果，从而大幅减少开发周期。

掌握Vue文件的编译过程对于深化我们对Vue开发的了解极为关键。在Vue开发实践中，你是否遭遇过因编译或样式处理引发的问题？期待大家点赞、转发此篇文章，并积极参与讨论。

// 用于存放代码，最后 join('n') 合并成一份完整代码
const codeList = [];
codeList.push(script.content);
codeList.push(template.code);
const code = codeList.join('n')

import { ref } from "vue";
export default {
  setup() {
     // setup 实现
  },
};
// ----- 上面是 script 的内容，下面是 template 的内容
import { xxx } from "vue"
export function render(_ctx, _cache) {
  // render 函数实现
}

相关文章

微信