vue源码解析——vue如何将template转换为render函数

Vue 将模板（template）转换为渲染函数（render function）是 Vue 编译器的核心功能，它是 Vue 实现响应式和虚拟 DOM 的关键步骤。在 Vue 中，模板（template）是开发者编写的类似 HTML 的代码，用于描述页面的结构和交互逻辑。渲染函数（render function）是 Vue 编译器将模板转换为JavaScript 函数，用于生成虚拟 DOM，并最终渲染到页面上。所以render的作用是生成虚拟dom。你可能会想，为什么vue要写template而不是html？为什么写了template通过render将模板生成虚拟dom，而不是直接生成html呢？请往下看

vue模板渲染是个很复杂的过程，牵扯vue的响应式和虚拟dom。本文只抓核心流程，不关心具体实现。纵向深入，不做横向扩展，参考下图模板渲染在vue生命周期的位置。

vue中的template模板

在Vue中，模板（template）指的是开发者编写的类似HTML的代码，用于描述页面的结构、样式和交互逻辑。模板中可以包含Vue特有的指令、数据绑定、事件处理等内容，通过Vue的编译器将模板转换为渲染函数，最终渲染到页面上。

vue2的template

以下是一个简单的Vue2模板示例：比较简单的Vue模板，描述了页面的结构和交互逻辑，通过Vue的数据绑定和事件处理机制实现了动态更新页面内容的功能

<template>
  <div>
    <h1>{
  
  { message }}</h1>
    <p>计数：{
  
  { count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

<style>
h1 {
  color: blue;
}
p {
  font-size: 16px;
}
button {
  background-color: green;
  color: white;
  padding: 5px 10px;
  cursor: pointer;
}
</style>

在上面的示例中，<template> 标签内包含了页面的结构，包括一个标题、一个段落和一个按钮。模板中使用了双大括号语法 { { }} 进行数据绑定，将 message 和 count 的值动态显示在页面上。按钮上使用了 @click 指令绑定了 increment 方法，实现点击按钮增加计数的功能。

vue3的template

以下是一个简单的Vue3模板示例：使用 <script setup> 语法的Vue 3模板，通过更简洁的语法实现了相同的功能。

<template>
  <div>
    <h1>{
  
  { message }}</h1>
    <p>计数：{
  
  { count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, Vue 3!');
const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

<style>
h1 {
  color: blue;
}
p {
  font-size: 16px;
}
button {
  background-color: green;
  color: white;
  padding: 5px 10px;
  cursor: pointer;
}
</style>

在这个示例中，我们使用 <script setup> 语法来定义组件的逻辑部分。通过 import { ref } from 'vue'; 引入 ref 函数，然后直接在 <script setup> 中定义 message 和 count 两个响应式数据，以及 increment 方法。这样可以更加简洁地管理组件的状态和逻辑。

思考：为什么vue写成template形式而不是html

Vue.js 使用 template 而不是直接使用 HTML主要考虑了以下几个原因：

数据绑定：Vue.js 使用了数据绑定技术，可以动态地渲染和更新视图。如果直接使用 HTML，则需要使用一些特殊的语法来实现数据绑定，这会使 HTML 变得复杂和难以维护。
组件化：Vue.js 是一个基于组件的框架，可以将复杂的应用分解成多个小的组件。如果直接使用 HTML，则无法实现组件化的特性，因为 HTML 本身不支持组件的概念。
虚拟 DOM：Vue.js 使用了虚拟 DOM 技术，可以更高效地渲染和更新视图。如果直接使用 HTML，则需要使用一些特殊的语法来实现虚拟 DOM，这会使 HTML 变得复杂和难以维护。
编译优化：Vue.js 在编译期间可以对 template 进行优化，例如将相同的元素合并成一个元素，提高渲染性能。如果直接使用 HTML，则无法进行这种优化。

因此，Vue.js 使用 template 可以更好地支持数据绑定、组件化、虚拟 DOM 和编译优化等特性，同时可以让我们使用简单直观的方式来定义组件的结构和内容。

为什么render不直接将template转成html，而是转成了虚拟dom?

当我们使用 Vue ，往往会将页面拆分为各种组件，通过拼装组件来形成页面和应用，就像搭积木一样。模板编译后组件所产出的内容并不是 html 字符串，而是大家所熟知的 Virtual DOM。

组件最核心的东西是 render 函数，剩余的其他内容，如 data、compouted、props 等都是为 render 函数提供数据来源服务的。render 函数本可以直接产出 html 字符串，但却产出了 Virtual DOM 。Virtual DOM 终究要渲染真实 DOM，这个过程就可以理解为模板引擎年代的完全替换 html，只不过它采用的不是完全替换，我们通常把这个过程叫做 patch。当数据变更时，组件会产出新的&n