第 1 卷

Vue 核心知识点深度解析

1. Vue3核心源码精读

Vue3 源码采用 Monorepo 架构（基于pnpm管理），按功能拆分为多个独立包（ vue、 @vue/reactivity、 @vue/compiler-core 等），核心亮点如下：

• 核心架构：分为响应式系统（ reactivity）、编译系统（ compiler）、运行时系统

• runtime）三大模块，解耦性更强；

• 响应式核心：基于 Proxy 实现响应式，源码核心在 @vue/reactivity 包，包含 effect

（副作用收集）、 track（依赖收集）、 trigger（依赖触发）三大核心函数；

• 组件渲染：采用 VNode（虚拟DOM）描述节点，通过 createVNode 创建虚拟节点， patch

函数进行虚拟DOM对比与真实DOM更新；

• 组合式API： setup 函数作为入口， ref（原始类型响应式）、 reactive（对象类型响应

式）、 computed（惰性计算）、 watch（依赖监听）等API封装了响应式核心逻辑；

• 编译优化：引入 PatchFlags（补丁标记）和 StaticNode（静态节点），编译阶段标记动态

节点，运行时只更新标记节点，提升渲染性能。

2. Vuex核心源码精读

Vuex 是Vue专属的集中式状态管理库，源码简洁且核心逻辑清晰（以Vuex4为例，适配Vue3）：

• 核心架构：基于单向数据流设计，核心模块包括 Store（核心类，实例化时初始化状态）、

State（全局状态）、 Getter（派生状态，类似计算属性）、 Mutation（同步修改状态）、 Action（异步操作，可提交Mutation）、 Module（模块拆分，支持命名空间

namespaced）；

• 核心原理：

1. 实例化 Store 时，通过 vue 的 inject/provide 实现全局注入，让所有组件可访问

$store；

1. State 的响应式：Vuex2基于 Vue 实例的 data 实现响应式，Vuex4基于Vue3的

reactive 实现；

c.Getter：通过 Object.defineProperty 定义访问器属性，缓存计算结果，依赖变化时重新计算；

1. Mutation/Action：通过 commit（提交Mutation）、 dispatch（分发Action）进行

3. Pinia核心源码精读

Pinia 是Vue官方推荐的新一代状态管理库，替代Vuex，源码更简洁，无嵌套模块设计：

• 核心特性：无 Mutation、支持组合式API、自动注入、TS友好、模块扁平化；

• 核心原理：

1. 核心类 Store：通过 defineStore 函数创建Store工厂，调用后实例化 Store，内部通

过 reactive 实现状态响应式；

1. 状态管理：每个Store是独立的实例，无全局 State，模块之间通过直接导入调用实现通信，

无需命名空间；

1. 副作用处理：支持在Store内部直接编写异步逻辑（替代Vuex的Action），无需区分同步/异

步；

1. 持久化：原生支持扩展，通过 pinia-plugin-persistedstate 插件即可实现状态持久

化，源码中通过 store.$subscribe 监听状态变化并存储；

1. 与Vue的集成：基于Vue3的 inject/provide 实现全局挂载，通过 app.use(pinia) 注

册后，组件内可通过 useStore 获取Store实例。

4. Vue的模板编译过程（具体步骤）

Vue的模板（ template）无法直接被浏览器识别，需要编译为 render 函数（返回VNode），编译过程分为3个核心步骤（核心在 @vue/compiler-core 包）：

1. 解析（Parse）：

• 输入：Vue模板字符串（如 <div>{{ msg }}</div>）；
• 处理：通过正则表达式逐行扫描模板，将其解析为AST（抽象语法树）；
• 输出：描述模板结构的AST节点（如元素节点、文本节点、插值节点）。

1. 优化（Optimize）：

• 目的：提升运行时渲染性能，减少虚拟DOM对比开销；

◦ 处理：遍历AST，标记两类节点：

• 静态节点：内容不会变化的节点（如 <div>静态文本</div>）；
• 静态根节点：包含多个静态节点的父节点；
• 输出：标记后的优化AST，运行时 patch 阶段会跳过静态节点的对比与更新。
• 输入：优化后的AST；

• 处理：遍历AST，将其转换为对应的JavaScript代码（即 render 函数）；

◦ 输出：可执行的 render 函数（如 _c('div', [_v(_s(msg))])，Vue2语法；Vue3语法

更简洁，基于 createVNode）。

补充：编译阶段可在构建时（如webpack+vue-loader）完成（生产环境推荐），也可在浏览器端实时编译（开发环境，性能较差）。

5. Vue的template语法与JSX语法的区别及各自优势

一、核心区别

jsx），转换为createVNode 调用

Vue的JSX特性

适用场景常规组件、简单逻辑的页面复杂逻辑组件、动态渲染场景、自定义渲染函数

二、各自优势

template 语法优势

1. 可读性强：类HTML结构，直观易懂，适合团队协作，尤其是前端新手或HTML开发者；
2. 编译优化充分：Vue官方对template做了大量优化（如静态节点标记、PatchFlags），无需手动优

化，性能更优；

1. 指令丰富：内置v-if、v-for、v-model、v-bind等指令，简化常见业务逻辑，无需手动编写复杂JS

逻辑；

1. 工具支持完善：Vue Devtools可直接调试template，语法高亮、格式化工具更成熟。