从零开始搭建简易Vue框架——(二)vue-mini核心模块介绍

新增Vue模块

上文我们已经配置好rollup打包文件,接下来我们要做的是构建Vue模块作为我们的核心展示模块,主要包含对我们核心模块的example和打包好的cjs和esm-bundler文件。

新建packages

新建包文件夹,具体文件目录如下:

进入到 vue 文件夹下,初始化js项目,完成后的目录如下:

Vue核心模块包

下面我们需要将核心模块作为包管理引入到vue文件夹下的package.json中。其中主要分为三大模块compiler-core、runtime-dom 以及 shared

compiler-core

compiler-core 模块是 Vue.js 源码中的一个核心模块,主要负责实现模板编译的相关功能。具体作用包括:

  1. 将模板编译成渲染函数:compiler-core 模块提供了将模板编译成渲染函数的功能,这样 Vue.js 在运行时可以直接使用渲染函数来渲染组件。
  2. 提供编译相关的工具函数:compiler-core 模块中包含了一些编译相关的工具函数,用于处理模板中的指令、表达式等内容,以便生成可执行的渲染函数。
  3. 定义编译过程中的 AST 节点类型:compiler-core 模块定义了编译过程中使用的 AST(抽象语法树)节点类型,用于表示模板中的各种语法结构。
  4. 提供编译器的核心逻辑:compiler-core 模块中包含了编译器的核心逻辑,负责将模板转换成 AST,再进一步转换成渲染函数。

总的来说,compiler-core 模块在 Vue.js 中起着将模板编译成可执行代码的关键作用,是 Vue.js 实现模板编译功能的核心部分。

runtime-dom

runtime-dom 模块是 Vue.js 源码中的一个核心模块,主要负责处理与浏览器 DOM 相关的操作。具体作用包括:

  1. 创建虚拟 DOM:runtime-dom 模块负责创建虚拟 DOM 对象,用于表示组件的结构和状态,以便在页面上进行高效的 DOM 操作。
  2. 将虚拟 DOM 渲染到真实 DOM:runtime-dom 模块负责将虚拟 DOM 渲染到真实的浏览器 DOM 中,实现组件在页面上的显示和交互。
  3. 处理事件绑定和事件监听:runtime-dom 模块提供了事件绑定和事件监听的功能,使得组件能够响应用户的交互操作。
  4. 处理属性、样式和类名的更新:runtime-dom 模块负责处理组件属性、样式和类名等内容的更新,保持页面内容与组件状态的同步。
  5. 提供一些实用的 DOM 操作方法:runtime-dom 模块中还包含了一些实用的 DOM 操作方法,如创建元素、插入元素、更新元素等,方便开发者进行 DOM 操作。

总的来说,runtime-dom 模块在 Vue.js 中起着将虚拟 DOM渲染到真实 DOM 的关键作用,是 Vue.js 实现组件渲染和交互的核心部分。

shared

shared 模块是 Vue.js 源码中的一个核心模块,主要用于定义一些在整个 Vue.js 代码库中共享使用的工具函数、常量和数据结构。具体作用包括:

  1. 定义常量:shared 模块中定义了一些常量,如 Vue.js 的版本号、错误信息等,这些常量在整个代码库中都可以被访问和使用。
  2. 定义工具函数:shared 模块包含了一些通用的工具函数,如类型判断、对象操作、数组操作等,这些工具函数可以被其他模块引用和复用。
  3. 定义数据结构:shared 模块中定义了一些数据结构,如响应式数据、观察者对象等,这些数据结构在整个 Vue.js 中都有广泛的应用。
  4. 提供跨模块共享的功能:shared 模块中的内容可以被其他模块引用和共享,避免了重复定义和提高了代码的复用性。

总的来说,shared 模块在 Vue.js 中起着定义共享工具函数、常量和数据结构的作用,为整个代码库提供了一些通用的功能和数据结构,方便各个模块之间的交互和复用。

总结

总而言之,庞大繁复的Vue框架就是由这三大模块相互配合从而完成了场景多如繁星的业务逻辑。后续的文章我会详细介绍各大模块的实现。

相关推荐
小兵张健1 小时前
价值1000的 AI 工作流:Codex 通用前端协作模式
前端·aigc·ai编程
sunny_1 小时前
面试踩大坑!同一段 Node.js 代码,CJS 和 ESM 的执行顺序居然是反的?!99% 的人都答错了
前端·面试·node.js
拉不动的猪2 小时前
移动端调试工具VConsole初始化时的加载阻塞问题
前端·javascript·微信小程序
ayqy贾杰3 小时前
Agent First Engineering
前端·vue.js·面试
IT_陈寒4 小时前
SpringBoot实战:5个让你的API性能翻倍的隐藏技巧
前端·人工智能·后端
iceiceiceice4 小时前
iOS PDF阅读器段评实现:如何从 PDFSelection 精准还原一个自然段
前端·人工智能·ios
大金乄4 小时前
封装一个vue2的elementUI 表格组件(包含表格编辑以及多级表头)
前端·javascript
葡萄城技术团队5 小时前
【性能优化篇】面对万行数据也不卡顿?揭秘协同服务器的“片段机制 (Fragments)”
前端
程序员阿峰5 小时前
2026前端必备:TensorFlow.js,浏览器里的AI引擎,不写Python也能玩转智能
前端
Jans5 小时前
Shipfe — Rust 写的前端静态部署工具:一条命令上线 + 零停机 + 可回滚 + 自动清理
前端