❌

普通视图

发现新文章，点击刷新页面。
今天 — 2025年10月14日首页

Vue 与 React 应用初始化机制对比 - 前端框架思考笔记

✇掘金 前端
作者 Takklin
2025年10月14日 02:10

Vue 与 React 应用初始化机制对比 - 前端框架思考笔记

引子：从挂载点开始的思考

最近在准备前端面试时，我一直在思考一个问题：为什么 Vue 和 React 都需要一个挂载点？这个看似简单的 <div id="app"></div> 到底在框架中扮演什么角色？

我当时想：这不就是一个普通的 div 吗？为什么非要指定它？直接往 body 里塞内容不行吗？

通过深入理解，我发现这背后涉及到现代前端框架的核心设计理念。

什么是挂载点？为什么需要它？

挂载点就是一个特定的 DOM 元素，作为我们应用的渲染容器。在 Vue 或 React 中，我们通过指定挂载点来告诉框架："请把整个应用的内容都渲染到这个元素内部"。

<body>
  <!-- 这就是挂载点 -->
  <div id="app"></div>
  
  <script src="main.js"></script>
</body>

我当时疑惑：如果不指定挂载点会怎样？框架会把内容直接插入到 body 中吗？

确实如此！如果没有明确的挂载点，Vue 或 React 可能会直接把内容插入到 body 或其他 DOM 元素中，造成页面结构混乱。想象一下，你的应用内容散落在 body 的各个角落，没有统一的容器，管理和定位 DOM 元素会变得极其困难。

Vue 的应用初始化过程

createApp 和 mount 的分离

在 Vue 3 中，应用初始化分为两个清晰的步骤：

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

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

我当时不理解：为什么要分 createApp 和 mount 两步？直接像 React 那样渲染不行吗？

深入思考后我明白了：

  • createApp(App)：创建 Vue 应用实例
  • .mount('#app')：将实例挂载到 DOM

这种分离设计让 Vue 在挂载前可以进行各种配置，比如注册全局组件、插件等。

Vue 的组件解析过程

我当时问：Vue 是怎么把模板变成实际页面的？

Vue 的模板编译过程是这样的：

  1. 模板解析：Vue 将 .vue 文件中的模板代码转换成 JavaScript 对象
  2. 生成虚拟 DOM：这些对象构成了虚拟 DOM（VNode），描述页面结构
  3. 渲染到实际 DOM：虚拟 DOM 通过比对算法更新实际页面
// 模板
<template>
  <div>{{ message }}</div>
</template>

// 被编译成渲染函数
render() {
  return createVNode('div', null, this.message)
}

我当时想：为什么要经过虚拟 DOM 这个中间步骤？

虚拟 DOM 的优势在于性能优化。Vue 通过比较新旧虚拟 DOM 的差异，只更新发生变化的部分，而不是重新渲染整个页面。

React 的应用初始化

直接的渲染方式

React 的初始化相对直接：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('app'))

我当时对比：React 为什么不需要像 Vue 那样先创建应用实例？

这与两个框架的设计哲学有关。React 更专注于组件本身的渲染，而 Vue 强调应用级别的管理和配置。

JSX 与 Vue 模板的差异

我当时注意到：React 的组件导出看起来比 Vue 简单很多：

// React 组件
function App() {
  return (
    <div>
      <h1>Welcome to My React App</h1>
    </div>
  )
}

export default App

<!-- Vue 组件 -->
<template>
  <div>
    <h1>Welcome to My Vue App</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

这种差异源于 Vue 的响应式系统需要更明确的数据声明。

设计哲学的深层差异

React：专注于组件渲染的简洁性

我当时困惑：React 是从根组件开始构建虚拟 DOM 树，而 Vue 是组件级框架自底向上构建，这和我前文的这两个框架的设计哲学：React 更专注于组件本身的渲染，而 Vue 强调应用级别的管理和配置。总觉得有哪里矛盾？

通过深入研究，我发现 React 的设计哲学是：

组件树作为应用核心

  • React 将整个应用视为组件树，根组件是起点
  • 通过 ReactDOM.render() 从根组件开始渲染整个树结构
  • 每个组件在渲染和状态管理上保持独立性
  • 不需要显式的应用实例，简化了配置

我当时理解：React 的简洁性体现在它把应用管理隐藏在组件树中，让开发者更专注于组件本身的实现。

Vue：应用实例与组件化的平衡

Vue 采取了不同的路径：

明确的应用实例概念

  • 通过 createApp() 创建明确的应用实例
  • 应用实例负责全局配置、插件、状态管理
  • 在保持组件化的同时，提供应用级别的管理能力

我当时对比：Vue 的设计既照顾了大型应用的需求（通过应用实例），又保持了组件级别的灵活性。

引用GPT的精彩理解image.png

单页应用（SPA）与多页应用（MPA）

我当时困惑：什么叫做"页面本身只有一个 HTML 文件"？我们不是有 index.html 还有各种 .vue 文件吗？

这里的关键区别在于：

单页应用（SPA）

  • 只有一个 HTML 文件（通常是 index.html）
  • 页面切换通过 JavaScript 动态渲染内容
  • 不会重新加载整个页面
  • 用户体验更流畅

多页应用（MPA）

  • 每个页面都有独立的 HTML 文件
  • 页面切换需要重新加载
  • 传统的网页开发方式

我当时恍然大悟：原来 .vue 文件在构建时会被打包工具处理，最终都合并到同一个 HTML 中！

构建工具的作用

我当时问：Vue 的模板编译是通过什么工具完成的？

现代前端开发离不开构建工具：

  • Webpack/Vite：模块打包和构建
  • Babel：JavaScript 代码转换
  • Vue Loader：处理 .vue 文件

Vue 的模板编译器会将模板转换成抽象语法树（AST），然后生成渲染函数。这个过程在构建阶段完成，而不是在浏览器中运行时。

多个 Vue 实例的情况

我当时好奇：什么情况下需要多个 Vue 实例？

虽然在单页应用中通常只有一个 Vue 实例，但在某些场景下可能需要多个：

// 不同功能模块使用不同实例
createApp(App1).mount('#app1')
createApp(App2).mount('#app2')

这种情况常见于：

  • 老项目渐进式迁移
  • 页面中有多个独立的功能模块
  • 微前端架构

虚拟 DOM 的重要性

我当时不理解：为什么要用虚拟 DOM？直接操作真实 DOM 不行吗？

虚拟 DOM（VNode）的本质是 JavaScript 对象，它描述了页面的结构。优势在于：

  1. 性能优化：通过 Diff 算法最小化 DOM 操作
  2. 跨平台能力：同一套虚拟 DOM 可以渲染到不同平台
  3. 开发体验：让开发者更关注业务逻辑而不是 DOM 操作

总结与面试要点

通过这番探索，我对 Vue 和 React 的初始化机制有了更深入的理解：

Vue 的特点

  • 明确的应用实例概念
  • 模板编译在构建时完成
  • 响应式数据系统
  • 配置灵活，适合大型应用

React 的特点

  • 专注于组件渲染
  • JSX 语法更接近 JavaScript
  • 函数式编程思想
  • 生态丰富，社区活跃

面试中如何描述

当被问到 Vue 和 React 的区别时，我可以这样回答：

"两者都是优秀的现代前端框架，但在设计理念上有所不同。Vue 通过 createApp 创建明确的应用实例，提供了更多的配置和管理能力；而 React 更专注于组件本身的渲染，通过 ReactDOM.render 直接渲染组件。这种差异体现在开发体验、性能优化和适用场景上。"

我的最终感悟：前端框架的每一个设计选择都有其深层考量。从简单的挂载点开始，深入理解框架的设计哲学，才能真正掌握前端开发的精髓。

❌
❌