# 前言

相对于传统的 jQuery 一把梭子撸到底的开发模式，组件化可以帮助我们实现 视图 和 逻辑 的复用，并且可以对每个部分进行单独的思考。对于一个大型的 Vue.js 应用，通常是由一个个组件组合而成：

但是我们实际访问的页面，是由 DOM 元素构成的，而组件的 <template> 中的内容只是一个模板字符串而已。那模板字符串是如何被渲染成 DOM 的呢？接下来我们将从组件入手，揭秘 Vue 的组件是如何被渲染成真实的 DOM 的。

# 初始化一个 Vue 3 应用

在开始本章节之前，我们先来简单初始化一个 Vue 3 的应用：

shell
复制代码# 安装 vue cli
$ yarn global add @vue/cli

# 创建 vue3 的基础脚手架 一路回车
$ vue create vue3-demo

接下来，打开项目，可以看到Vue.js 的入口文件 main.js 的内容如下：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

这里就有一个根组件 App.vue。为了更加简单地介绍 Vue 根组件的渲染过程，我把 App.vue 根组件进行了一个简单的修改：

html
复制代码<template>
  <div class="helloWorld">
    hello world
  </div>
</template>
<script>
export default {
  setup() {
    // ...
  }
}
</script>

# 根组件模板编译

我们知道 .vue 类型的文件无法在 Web 端直接加载，我们通常会在 webpack 的编译阶段，通过 vue-loader 编译生成组件相关的 JavaScript 和 CSS，并把 template 部分编译转换成 render 函数添加到组件对象的属性中。

上述的 App.vue 文件内的模板其实是会被编译工具在编译时转成一个渲染函数，大致如下：

import { openBlock