Vue 2.0的源码目录设计

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.mzph.cn/news/152348.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

upload-labs(1-17关攻略详解)

upload-labs pass-1 上传一个php文件,发现不行 但是这回显是个前端显示,直接禁用js然后上传 f12禁用 再次上传,成功 右键打开该图像 即为位置,使用蚁剑连接 连接成功 pass-2 源码 $is_upload false; $msg null; if (isse…

QMenuBar和QToolBar使用同一个QAction

文章目录 前言一、编辑QMenuBar二、将QMenuBar中的Action添加到toolbar总结 前言 qmenubar中的action添加到toolbar,不是在toolbar中再添加action,效果图如下 一、编辑QMenuBar 正常编辑QMenuBar,以下图为例 二、将QMenuBar中的Action添…

matlab层次分析法模型及相关语言基础

发现更多计算机知识,欢迎访问Cr不是铬的个人网站 代码放在最后面! 这篇文章是学习层次分析法模型的笔记。 1.什么时候用层次分析法 层次分析法是建模比赛中最基础的模型之一,其主要用于解决评价类问题(例如:选择哪种方案最好、…

OpenGL 绘制点与三角形(Qt)

文章目录 一、简介二、实现代码三、实现效果一、简介 这里对OpenGL中点与三角形相关绘制操作进行封装,方便后续点云数据与模型数据的渲染。 二、实现代码 这里我们先创建一个基类Drawable,后续的点、线、面等,均会继承该类: Drawable.h #ifndef DRAWABLE_H #define DRAWABL…

Linux:zip包的压缩与解压

压缩文件&#xff1a; zip命令 语法&#xff1a; zip [-AcdDfFghjJKlLmoqrSTuvVwXyz$][-b <工作目录>][-ll][-n <字尾字符串>][-t <日期时间>][-<压缩效率>][压缩文件][文件...][-i <范本样式>][-x <范本样式>] 补充说明&#xff1a;zi…

opencv(5): 滤波器

滤波的作用&#xff1a;一幅图像通过滤波器得到另一幅图像&#xff1b;其中滤波器又称为卷积核&#xff0c;滤波的过程称为卷积。 锐化&#xff1a;边缘变清晰 低通滤波&#xff08;Low-pass Filtering&#xff09;&#xff1a; 目标&#xff1a;去除图像中的高频成分&#…

什么是RS485通信

RS-485是一种通讯接口标准&#xff0c;RS就是Recommended Standard的缩写&#xff08;推荐标准的意思&#xff09;485是标识号。 RS485采用总线的接线方式&#xff0c;广泛应用于数据采集和控制&#xff0c;它的主要优点之一是它允许将多个RS485设备放在同一条总线上。 多设备…

关于LED显示屏的扫描方式知识

LED显示屏的扫描方式是指LED显示屏如何以一定的顺序控制LED点阵的亮度&#xff0c;从而形成图像或文字。主要有静态扫描和动态扫描两种方式。 静态扫描&#xff08;Static Scan&#xff09;&#xff1a; 描述&#xff1a; 在静态扫描中&#xff0c;LED显示屏的每个LED点都有一个…

Web 开发中 route 和 router 有什么区别?

什么是路由&#xff1f; 在 Web 开发中&#xff0c;会经常和路由打交道&#xff0c;可能有的同学并没有仔细思考过到底什么是路由。路由是根据用户请求的 URL 来确定返回给用户的内容或页面的技术&#xff0c;即将 HTTP 请求映射到相应的处理代码&#xff0c;使得用户能够通过…

DataBinding原理

1、MainActivity首先使用DataBindingUtil.setContentView设置布局文件activity_main.xml。 2、随后&#xff0c;经过一系列函数调用&#xff0c;ActivityMainBindingImpl对象最终会实例化&#xff0c;并与activity_main.xml进行绑定。 3、实例化后的ActivityMainBindingImpl对象…

基于深度学习的单帧图像超分辨率重建综述

论文标题&#xff1a;基于深度学习的单帧图像超分辨率重建综述作者&#xff1a; 吴 靖&#xff0c;叶晓晶&#xff0c;黄 峰&#xff0c;陈丽琼&#xff0c;王志锋&#xff0c;刘文犀发表日期&#xff1a;2022 年9 月阅读日期 &#xff1a;2023.11.18研究背景&#xff1a; 图像…

微信小程序配置企业微信的在线客服

配置企业微信后台 代码实现 <button tap"openCustomerServiceChat">打开企业微信客服</button>methods: {openCustomerServiceChat(){wx.openCustomerServiceChat({extInfo: {url: 你刚才的客服地址},corpId: 企业微信的id,showMessageCard: true,});} …

深度学习之基于YoloV5-Pose的人体姿态检测可视化系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 深度学习之基于 YOLOv5-Pose 的人体姿态检测可视化系统介绍YOLOv5-Pose 简介系统特点系统架构使用方法 二、功能三、系统四. 总结 一项目简介 深度学习之基…

vue3之echarts区域折线图

vue3之echarts区域折线图 效果&#xff1a; 核心代码&#xff1a; <template><div class"abnormal"><div class"per">单位&#xff1a;{{ obj.data?.unit }}</div><div class"chart" ref"chartsRef"&g…

CSDN每日一题学习训练——Python版(N皇后 II、买卖股票的最佳时机 II、编程通过键盘输入每一位运动员)

版本说明 当前版本号[20231120]。 版本修改说明20231120初版 目录 文章目录 版本说明目录N皇后 II题目解题思路代码思路参考代码 买卖股票的最佳时机 II题目解题思路代码思路参考代码 编程通过键盘输入每一位运动员题目解题思路代码思路参考代码 N皇后 II 题目 n 皇后问题…

达索系统3DEXPERIENCE云端设计新体验

云是现代生活中必不可少的工具&#xff0c;在云端进行数据传输避免了传统的文件传输方式&#xff0c;更加方便快捷&#xff0c;节约了工作时间。 01 云端平台升级 在日常工作中有什么独特优势 在我们的生活工作中&#xff0c;云越来越多被提起&#xff0c;比如云计算、云服务…

卷积神经网络(CNN)多种图片分类的实现

文章目录 前期工作1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#xff09;我的环境&#xff1a; 2. 导入数据3.归一化4.可视化 二、构建CNN网络模型三、编译模型四、训练模型五、预测六、模型评估 前期工作 1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#…

从多表连接视图对比人大金仓和Oracle

KING BASE 信息时代&#xff0c;数据是驱动业务决策和创新的核心资源。然而&#xff0c;随着数据量的不断增加&#xff0c;有效地处理和整合数据的过程变得愈发复杂。这时&#xff0c;多表连接视图悄然走进数据库世界&#xff0c;不仅能够将多个表中的数据整合在一起&#xff0…

香港公司如何开户 香港公司开户流程 香港公司开户注意事项

香港公司成为越来越多企业的优选注册地&#xff0c;由于其更加开 放的经济政策和国际化的金融市场&#xff0c;吸引了大量的投资者。然而&#xff0c;对于众多企业来说&#xff0c;香港公司的开户过程可能会有一些复杂和繁琐的环节。 香港公司开户流程 开立香港公司账户通常需…

es为什么这么快

es为什么这么快的方式 es的基于Lucene开源搜索引擎&#xff0c;负责文件存储和搜索&#xff0c;支持http请求&#xff0c;以json形式展示 这样介绍你有可能有点迷糊我们详细解释 es 使用的倒排索引的方式&#xff0c;进行数据存储方式&#xff0c;给每一个字段创建索引&…