Vue或React如何处理HTML到JS的转换_Vue或React处理HTML到JS转换原理

Vue和React通过编译将类HTML语法转为JS生成的虚拟DOM。React用Babel将JSX转为createElement调用，Vue将template编译为render函数，均生成VNode对象，再经diff算法高效更新真实DOM。

Vue 和 React 都不是直接把 HTML 转成 JS，而是通过特定方式将模板或 JSX 编译为 JavaScript 可执行的虚拟 DOM 对象，从而实现动态渲染。核心目标是让开发者用接近 HTML 的语法描述 UI，最终由框架在运行时高效更新真实 DOM。

React：JSX 编译为 createElement 调用

React 使用 JSX 语法，看起来像 HTML，但实际上是一种 JavaScript 的语法扩展。

在构建阶段，Babel 等工具会将 JSX 转换为 React.createElement() 函数调用。

例如：

你写的 JSX：

立即学习“前端免费学习笔记（深入）”；

const element = <h1 className="title">Hello</h1>;

会被编译为：

const element = React.createElement('h1', { className: 'title' }, 'Hello');

这个调用返回一个描述 DOM 节点的普通 JavaScript 对象（即虚拟 DOM 节点），React 在后续通过比对虚拟 DOM 差异，决定如何更新真实 DOM。

Vue：模板编译为渲染函数

Vue（尤其是选项式 API 中使用 template）会把模板字符串编译为 render 函数。

在构建时（或运行时，取决于版本和配置），Vue 的模板编译器会解析 HTML 模板，生成对应的 JavaScript 渲染函数。

例如：

你写的模板：

<template>
<h1 class="title" v-if="show">{{ message }}</h1>
</template>

会被编译为类似这样的 render 函数：

render(h) {
return this.show ? h('h1', { class: 'title' }, this.message) : null;
}

这里的 h 实际上是 createElement 的别名，返回的也是虚拟 DOM 节点。Vue 3 中使用的是 h 函数，结构更简洁。

关键原理：虚拟 DOM 是桥梁

无论是 React 的 JSX 还是 Vue 的模板，最终都生成虚拟 DOM（JavaScript 对象）。

• 虚拟 DOM 是对真实 DOM 的轻量级抽象
• 每次状态变化，框架会生成新的虚拟 DOM 树
• 通过 diff 算法比对新旧树，找出最小变更
• 只更新需要变更的真实 DOM 节点，提升性能

总结：转换发生在构建或运行时

Vue 和 React 都没有“运行 HTML”的能力。它们通过工具链将类 HTML 语法转换为 JavaScript 函数调用，生成虚拟 DOM。

• React 依赖 JSX + Babel 编译为 React.createElement
• Vue 将 template 编译为 render 函数，返回 VNode
• 两者最终都靠 JavaScript 描述 UI 结构

基本上就这些，不复杂但容易忽略本质：HTML 没有进入浏览器，真正执行的是 JS 生成的虚拟结构。