学习vue3源码

2023-09-18 10:03:37

 🎬 岸边的风:个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

⛺️ 生活的理想,就是为了理想的生活 !

在这里插入图片描述

 

目录

1. 为什么要学习源码

阅读优秀的代码的目的是让我们能够写出优秀的代码

不给自己设限,不要让你周围人的技术上限成为你的上限

功利性的阅读源码

2.源码应该怎么阅读

单点突破

系统阅读

具体方案

3.本地怎么调试源码

最后


1. 为什么要学习源码

阅读优秀的代码的目的是让我们能够写出优秀的代码

其实就跟我们写作文一样,你看的高分作文越多,写出高分作文的概率就越大

大部分程序员都只会写代码(改,抄,stackoverflow工程师,代名词: 搬砖),会阅读代码的很少,为什么呢?因为国内所有的教育,网课,培训都没有教你怎么去看代码,只教你怎么去写代码

再者基于现在的程序员工作模式(模块化开发,只需要拿到需求做自己的部分),别说看源码,甚至就连项目里的代码都懒的去看,我认识的很多程序员就是这样的,一个项目摸了两三年,你要问他项目中webpack都干了哪些事情,他的回答是不知道,反而趾高气扬的告诉你,那些他从来都用不上,看了也没什么用,也看不懂,这里省略内心千字脏文

阅读代码其实就咱们跟阅读一本小说一样,看过玄幻小说才能说出来修仙,看过都市的才能讲出来穿越

阅读主要目的是为了帮助我们积累素材,不要书到用时方恨少,看到美女我们应该能有一万种词语去形容,如气若幽兰,美艳不可方物,一笑倾城,再笑倾国,世间尤物,而不是简短的几个字,我艹,美女!

  • 那么为什么非要看源码呢?

前面有提到优秀的高分作文看多了你才能写出来高分作文,你天天看着0分作文,那么写出来的大概率也自然是0分作文,什么样的作文算是高分呢?这个很好区分,前期从众就好

不给自己设限,不要让你周围人的技术上限成为你的上限

很多时候,人会潜意识给自己设限

井底之蛙是大家应该都熟悉的故事,大多数时候我们会给自己画一个圈,将同事的技术跟自己的技术做对比,或者将TL的技术跟自己做对比,经常有人向我吐槽说,同事的技术不如他为什么工资比他高,TL的技术也不怎么样,为什么能成为TL,现在给你的回答是,"因为你以为的并不是你以为的"

我们完全没有必要把时间花费在这种毫无意义的事情上面,改变不了环境就改变自己,学会破圈,为什么总有人说北上广深适合创业,因为北上广深的风水爆炸还是空气新鲜?显然都不是,在北上广深无非就是让你的人脉更优质一些,上限更高一点,你的圈有多大,未来的想象空间才有可能更大

  • 你一直将自己跟同事对比,那么你同事的上限就是你的上限
  • 你拿尤大跟自己对比,那么尤大的上限就是你的上限
功利性的阅读源码

功利性即指有目的性的,明确知道自己干完某一件事后能得到什么样的回报,所以首先你要知道你想得到什么?

看每一本书都有明确的目的,想学会理财,就得看理财相关的书,想学点技术,就得看点技术相关的书

看源码也是一样,你对vue.use之后发生了什么比较好奇,或者是你觉得现在面试都需要会看点源码,这都很好,至少你有明确的诉求

凡事只要有了功利属性,才更容易走的下去,否则就是真香警告

2.源码应该怎么阅读

单点突破

这种情况一般在是自己写需求遇到问题了,或者突然一时兴起想看看内脏的同学,可以直接粗暴的找到源码的仓库,直接在该仓库搜索关键字,然后根据模糊搜索的结果再结合自己的理解选择合适的结果,以下以Vue.use为例,如下图

image.png

我们可以看到第一个结果就是.spec (Standard Performance Evaluation Corporation,标准性能评估机构bai) 可以理解为代码的试金石,优秀开源代码的标配,直接代表着代码的稳健性

点进去我们看到的代码如下,从图中我们就能大致的猜到Vue.use的一些使用场景及边界值

image.png

从结果的第四个点进去,我们就能直接看到源码了,是不是很easy ?

image.png

系统阅读

即指以项目为维度的源码阅读,这种方式比上面的单点突破价值就要大很多,读完之后,不仅可以知道执行一个Api时具体发生了什么,更重要的是能学习到项目整体的设计思想和架构理念

当然,阅读难度也会有相应提高,这里给你四个建议

  • 决心(事事把决心放第一)
  • 对你所阅读的代码框架要有基本的了解(不然你读个啥)
  • 设定一个计划并自我复盘总结
  • 循序渐进,任何事情需要一个过程,由易到难,由浅入深
具体方案
  • 选择合适的工具让代码先跑起来
  • 理清楚代码组织关系及用途
  • 利用好单元测试
  • 利弊权衡(该跳就跳,长期处于蒙的状态很容易走进死胡同,可以标记回头再看)
  • 利用搜索引擎(可以结合网上的源码分析资料理解)
  • 多跟自己交互(带问题阅读)

3.本地怎么调试源码

科普一下SourceMap这个东西吧,分开念Source Map,一句话理解就是一段维护了前后代码映射关系的json描述文件,具体故事可以泡杯茶慢慢讲了,这里不过多描述,感兴趣的自行查阅相关文档

有了sourcemap文件后,你想debugger还是console,就可以随意了

在vue3的example中的我们看到示例引用的都是dist文件

image.png

只需要将sourcemap配置开启,然后就能随意的debugger

image.png

image.png

最后

接下来让我们一起遨游在源码的海洋里吧!

更多推荐

KVCache原理简述

在GPT的推理过程中,它根据完整的提问和回答的已生成部分,来生测下一个词(的概率)。例如,我们的提问是【天王盖地虎,】,回答是【宝塔镇河妖。】。那么第一次,GPT根据【天王盖地虎,】生成【宝】,之后根据【天王盖地虎,宝】生成【塔】,以此类推,直到碰上终止符。这里面提问【天王盖地虎,】的QKV实际上重复计算了很多遍。由于

学了1个月机器学习的总结

书实在是厚,看不下去,还是看视频容易接受。总结:入门应该从如何把点拟合成一条线开始。先从统计学里的方差开始,扩展最小二乘法,引出线性回归。然后是逻辑回归,引出机器学习核心——求代价函数最小值。进而引出正则、学习率、过拟合欠拟合、偏差方差、准确率召回率、训练集验证集测试集等机器学习基础。进而扩展知识面,从线性到非线性,神

一、八大排序(sort)

文章目录一、时间复杂度(一)定义:常数操作二、空间复杂度(一)定义:三、排序(一)选择排序1.定义2.代码3.特性(二)冒泡排序1.定义2.代码3.特性(三)插入排序1.定义2.代码3.特性(四)归并排序1.定义2.代码3.特性(五)快速排序(六)堆排序(七)基数排序(八)计数排序一、时间复杂度(一)定义:常数操作与数

口袋参谋:淘宝生意参谋指数,如何一键转换成真实数值?

在淘宝天猫上,我们是无法直接清楚的,了解竞品真实数据,因为平台为了保护商家的权益,将真实数值全部隐藏起来了,也就是变成了我们能看到的虚拟指数。那我们在生意参谋中,从市场排行、市场大盘等地方,看到的交易额、支付人数、转化率、收藏人数、加购人数等数据都是指数,而不是实际值。这样的话,我们在做竞品分析时,基本上就失去参考价值

nginx反向代理

nginx反向代理8.反向代理8.1实现http反向代理8.1.1反向代理配置参数8.1.2反向代理单台web服务器8.1.2.1端口号后加"/"8.1.2.2端口号后不加"/"8.1.3指定location实现反向代理,动静分离8.1.4反向代理实例:缓存功能8.1.4.1举例8.1.5实现反向代理客户端IP透传8.

2024得物校招面试真题汇总及其解答(一)

1.有哪些查找优化算法查找优化算法是指可以提高查找效率的算法。常见的查找优化算法包括:二分查找:二分查找是一种基于分治思想的查找算法。它首先将查找范围缩小一半,然后再在缩小后的范围内进行查找,以此类推,直到找到目标元素或判断目标元素不存在。二分查找的平均时间复杂度为O(logn),其中n是数据集的大小。哈希表:哈希表是

Java常见面试题

目录1、mysql并发事务会带来哪些问题,如何解决?2、请详细描述Redis持久化机制?3、简述Redis缓存雪崩和缓存穿透的问题和解决方案?4、RabbitMQ消息丢失及对应解决方案5、什么叫线程安全?举例说明6、举例说明常用的加密算法7、synchronized和ReentrantLock有什么区别?8、synch

【Python 基础篇】Python环境搭建

文章目录一、Python环境的下载二、Python环境变量的安装及配置三、Python编译器的选择一、Python环境的下载Python官方网站:www.python.org这个是Python的官方网站,Python下载以及相关文档都能在里面找到如果下载慢的话,可以在各大电脑应用市场下载(自己是在联想应用商店下载的)…

01-安装

1、安装前准备1.1、集群IP分布主机名IP地址角色备注kube-master192.168.168.60kube-master管理节点kube-node1192.168.168.61kube-node计算节点kube-node2192.168.168.62kube-node计算节点kube-node3192.168.

压缩算法---以golang/snappy为例

压缩,典型的时间换空间用到LRU,首选hashicorp/golang-lru,不过不知道啥时候,Go官方悄不溜整了一个groupcache,也提供了lru的实现…顺道瞟了一眼,发现github.com/golang下除去有go,还有一整套配套的常用组件。比如vscode/sublime的插件,有性能测试工具perf,

对不起,是我“造谣传谣”了

前天发布了一篇推文,传递了一条错误的信息:不连接VPN也可以访问Obsidian插件市场了。没想到一石激起千层浪,很多朋友留言反馈说:然后我慌了。自己竟“沦为”一个“造谣传谣”者,为此陷入“不知该如何处理”的慌乱之中。于是求助外援:然而,最让我感动的是,在纠结于“删”与“不删”期间,陆续收到很多朋友友善的留言。他们没有

热文推荐