Vue 2.0的源码目录设计

news/2025/2/22 11:37:56

Vue 2.0 的源码都在 src 目录下,其目录结构如下。

src
├── compiler        # 编译相关 
├── core            # 核心代码 
├── platforms       # 不同平台的支持
├── server          # 服务端渲染
├── sfc             # .vue 文件解析
├── shared          # 共享代码

1. compiler

compiler 目录包含 Vue.js 所有编译相关的代码。它包括把模板解析成 ast 语法树,ast 语法树优化,代码生成等功能。

编译的工作可以在构建时做,借助 webpack、vue-loader 等辅助插件;也可以在运行时做,使用包含构建功能的 Vue.js。显然,编译是一项耗性能的工作,所以更推荐前者-离线编译。

2. core

core 目录包含了 Vue.js 的核心代码,包括内置组件、全局 API 封装,Vue 实例化、观察者、虚拟 DOM、工具函数等等。

这里的代码可谓是 Vue.js 的灵魂,也是我们之后需要重点分析的地方。

3. platform

Vue.js 是一个跨平台的 MVVM 框架,它可以跑在 web 上,也可以配合 weex 跑在 native 客户端上。platform 是 Vue.js 的入口,2 个目录代表 2 个主要入口,分别打包成运行在 web 上和 weex 上的 Vue.js。

4. server

Vue.js 2.0 支持了服务端渲染,所有服务端渲染相关的逻辑都在这个目录下。注意:这部分代码是跑在服务端的 Node.js,不要和跑在浏览器端的 Vue.js 混为一谈。

服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。

5. sfc

通常我们开发 Vue.js 都会借助 webpack 构建, 然后通过 .vue 单文件来编写组件。

这个目录下的代码逻辑会把 .vue 文件内容解析成一个 JavaScript 的对象。

6. shared

Vue.js 会定义一些工具方法,这里定义的工具方法都是会被浏览器端的 Vue.js 和服务端的 Vue.js 所共享的。

7. 总结

Vue.js 的目录设计可以看到,作者把功能模块拆分的非常清楚,相关的逻辑放在一个独立的目录下维护,并且把复用的代码也抽成一个独立目录。

这样的目录设计让代码的阅读性和可维护性都变强,是非常值得学习和推敲的。


http://www.niftyadmin.cn/n/5198638.html

相关文章

【原创】为MybatisPlus增加一个逻辑删除插件,让XML中的SQL也能自动增加逻辑删除功能

前言 看到这个标题有人就要说了,D哥啊,MybatisPlus不是本来就有逻辑删除的配置吗,比如TableLogic注解,配置文件里也能添加如下配置设置逻辑删除。 mybatis-plus:mapper-locations: classpath*:mapper/*.xmlconfiguration:mapUnd…

深度学习人脸表情识别算法 - opencv python 机器视觉 计算机竞赛

文章目录 0 前言1 技术介绍1.1 技术概括1.2 目前表情识别实现技术 2 实现效果3 深度学习表情识别实现过程3.1 网络架构3.2 数据3.3 实现流程3.4 部分实现代码 4 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 深度学习人脸表情识别系…

点云从入门到精通技术详解100篇-面向三维测量的光栅结构光 图像去噪

目录 前言 国内外研究现状 结构光三维测量技术 结构光图像去噪研究 目前存在问题

如何使用VisualSVN在Windows系统上设置SVN服务器并公网远程访问

文章目录 前言1. VisualSVN安装与配置2. VisualSVN Server管理界面配置3. 安装cpolar内网穿透3.1 注册账号3.2 下载cpolar客户端3.3 登录cpolar web ui管理界面3.4 创建公网地址 4. 固定公网地址访问 正文开始前给大家推荐个网站,前些天发现了一个巨牛的 人工智能学…

《数据:挖掘价值,洞察未来

大数据:挖掘价值,洞察未来 我们正身处一个数据驱动的时代,大数据已经成为企业和个人决策的重要依据。本文将深入探讨大数据的魅力,挖掘其价值,并洞察未来发展趋势,让我们一起领略大数据的无穷奥秘。 一、大…

leetcode数据结构与算法刷题(三)

目录 第一题 交叉链表 思想: 注意点 第一步先求两个链表的长度 第二步 让长的先走,当长短一样时一起走。 犯错点 第二题 判断是有环 思想: 注意 错误分享 第三题(重点面试题) 思路: 这题面试问题&a…

Map 和 WeakMap:JavaScript 中的键值对集合

JavaScript 是一种动态、弱类型的脚本语言,经常用于构建现代 Web 应用程序。在编写 JavaScript 代码时,我们经常需要使用各种数据结构来存储和管理数据。其中,Map 和 WeakMap 就是两个非常有用的数据结构,它们分别提供了用于存储键…

『亚马逊云科技产品测评』活动征文|搭建图床chevereto

『亚马逊云科技产品测评』活动征文|搭建图床chevereto 提示:本篇文章授权活动官方亚马逊云科技文章转发、改写权,包括不限于在 Developer Centre, 知乎,自媒体平台,第三方开发者媒体等亚马逊云科技官方渠道 文章目录 『…