Vue的模板编译过程

👨 作者简介：大家好，我是Taro，全栈领域创作者
✒️ 个人主页：唐璜Taro
🚀 支持我：点赞👍+📝 评论 + ⭐️收藏

---

---

前言

随着业务的不断发展，源码这门技术也越来越重要，很多人都开启了源码学习，本文就介绍了Vue的模板编译过程的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、编程范式的分类

1.编程范式分为声明式和命令式

评价标准：1.性能，2.可维护性

1.性能

命令式 > 声明式

2.可维护性

命令式 <声明式

二、vue

1.运行时 ，2.编译时，3. 运行时+ 编译时

1.运行时

运行时是利用 render函数 把 vnode 渲染成真实的节点，如果只靠运行时，是无法通过HTML标签结构的方式进行渲染解析的，这个时候就需要借助另外一个东西，也就是 编译时

---

2.编译时

对于 编译时 ，则是把 template 中的 html 标签结构编译成为 render 函数，然后再利用运行时 render 进行挂载对应DOM

---

3. 运行时+ 编译时

---

总结

• ​​编译阶段​​：
  模板 → 渲染函数（虚拟 DOM 生成逻辑）
  优化静态内容（如静态节点提升）
• 运行阶段​​​​
  执行渲染函数生成虚拟 DOM。
  数据变化时触发 Diff 比对和 DOM 更新。

---

以上就是今天要讲的内容，本文仅仅简单介绍模板编译的过程。