Vue.js 官方团队成员霍春阳新作,深入解析 Vue.js 设计细节【文末送书】

霍春阳(Hcy),Vue.js 官方团队成员。专注于 Web 研发领域,是 Vue.js 3 的核心贡献者之一,Vue.js 文档生成工具 Vuese 的作者,技术社区活跃者,曾撰写大量颇受好评的技术博客。

经过一年的准备,霍春阳的新书《Vue.js设计与实现》正式出版了!预售一周就已重印,刷新了近两年的图书重印记录。‍


坊间流传着很多有关他的传奇经历,很多人对他的经历都非常好奇。今天这篇文章让大家走近霍春阳,了解一个真实的他,一个喜欢把事情做到极致的人,一个喜欢“留下点什么”的开发者。


大家好,我是霍春阳(Hcy)。

很开心的和大家分享一个消息:我的新书《Vue.js 设计与实现》出版了。

从 2021 年初开始准备这本书,到今天正式出版,很开心一切都能够按部就班的进行,虽然中间因疫情原因耽搁了一些,但整体上是在轨的。这里必须要感谢出版社里各位尽职尽责的工作人员,尤其是王军花老师。

借着这个机会我想和读者分享一些关于本书和我,以及 Vue.js 的一些事情。就从为什么要写这本书开始吧。

dbf3c3ba71f7089894980166001cf116.gif

为何要写这本书?

这确实也是值得我本人深思的一件事儿。我想从两个方面来阐述我写这本书的原因:

  • “干一行,爱一行”

  • “留下点什么”

知乎上有一个问题:“你做程序员真的是因为热爱吗?”。我回答了这个问题,感兴趣的朋友可以在这里了阅读完整的回答:你做程序员真的是因为热爱吗?

大意是,恰好写代码这事儿能赚钱。而我是属于那种“干一行,爱一行”的人,它讲的是一种职业精神,即无所谓做哪个行业,但只要确定了一个行业,那么就能全身心的投入,并能够因为这种投入和达到的成就让你真正的爱上这个行业,即所谓的“干一行,爱一行”

从小我就有一个特殊的习惯(也许是怪癖),我也不知道是从什么时候、什么原因让我产生并保持这种习惯。这个习惯是:“留下点什么”

ea17774a2a3f7479526b3493eb5c8cbf.png

小时候家里有一台黑白电视机,每天播放的内容大概会在电视剧、广告、动画片之间反复。然后突然有一天我就想,如何能证明我看过电视的内容呢?

为了能够证明这一点,我就会根据电视剧、广告、动画片这几个栏目对电视的内容进行分类并写在纸上,一旦电视切换了播放内容,我就会在纸上对应的分类后面画一道竖线。

这样一来,纸上的竖线就能够证明我看过电视了,而这些竖线就是我看电视这件事情“留下来”的东西。这会给我一种莫名的“充实”感。

类似的事情还有很多。例如,每年秋收的时候家里用水稻脱粒机对水稻进行脱粒处理,脱粒后的水稻会被灌进编织袋中,由于脱粒的计费方式是按照最终水稻的袋数来算钱的,因此每灌满一个编织袋都会记一次数量。

计数方式也很有意思,由于“正”字的笔画数量正好是 5,两个“正”字就代表 10 袋。当时,我最喜欢的事情就是拿着粉笔在黑色木板上帮大人们记数。因为这种行为很符合“留下点什么”的审美。

再如,小时候玩游戏机(插游戏卡的那种),无论什么游戏,我都喜欢在游戏结束之后拿笔和纸记录下局次,输赢结果等,以便代表我确实玩过这些游戏,而记录下来的这些内容,就是我玩游戏这个行为“留下来”的东西。

回到这个问题本身,我为什么要写这本书?

很简单,我想“留下点什么”,以证明我确实为 Vue.js 做过贡献。我很享受写这本书的过程,它让我感到很“充实”,留下了一些东西的那种充实。

以写代码为职业,“干一行,爱一行”的性格让我更加敬业,并成为 Vue.js 的团队成员。如果还能“留下点什么”,那这种“诱惑”对我来说简直无法抗拒。若是“留下的这些东西”还能够为读者、为 Vue.js 社区带来一些帮助的话,那真的是完美了。

而更加庆幸的一点是,真的有很多读者私信我并表达了对这本书的期待。在一定程度上,我个人觉得我也非常适合编写这么本书,其中一个最大的原因是:我认为我能与绝大部分读者产生共鸣

通常来说,学习一项技术只需要掌握其核心思想即可,而无需事无巨细地深入细节。这样的学习方式有一定好处,但同时会给人一种“虚”的感觉。

就像上学时学习操作系统课程一样,如果你不跟着课程完成对应的实验,实际修改一下操作系统的代码,而只是学习一些进程、线程、文件系统、虚拟内存的抽象概念,虽然能够在一定程度上理解,但始终觉得不踏实。

同样的,学习前端框架也是一样的道理。基于这个原因,这本书则照顾到了两个方面。

一方面,它从全局视角介绍了框架设计及其各个方面的权衡;另一方面,也从具体的代码出发,真正地将功能实现,并在此过程中让读者能够切身感受并学习其中的难点和解决方案。

我的确花费了很大精力编写本书,共 500 页,希望它的内容不会让你们失望。同时由于我的水平有限,有任何疏漏望不吝指出。

7fe6c0b4cd26422ce69debb71a37018b.gif

Vue.js 3 仍然在更新,

这本书会过时吗?

这其实是一个好问题,也是我愿意强调的一个问题。简单来说,答案是:不会

这本书并非一本“源码解读”书籍,而是建立在笔者对 Vue.js 3 的理解之上,以由简入繁的方式介绍 Vue.js 3 中各个功能模块的设计与实现。同时辅以足够的“细节”,旨在帮助读者能够更轻松、更自然地理解 Vue.js 3 的框架机理

举个例子,本书在介绍 Vue.js 3 中基于 Proxy 实现的响应系统时,并没有照猫画虎地照搬 Vue.js 源码中的实现,并基于此反推代码的运行机制。

而是会从 ECMAScript 的规范入手,详细地阐述 JavaScript 对象的本质,以及创建代理对象(Proxy)的内在原理,并基于此从 0 开始,一点一点地构建整个完善的响应系统。

这样做的好处在于,读者能够了解代码的发展路径,真正的做到知其然并知其所以然

再如,在模板编译的章节中。本书同样带领读者从 WHATWG 的规范入手,详细地介绍了文本模式的概念以及其对解析器的影响。

在编写模板编译器的过程中,还会涉及到字符引用的解码,这些内容都需要从规范入手才能真正地理解“为什么”。幸运的是,本书会带领读者阅读并理解相关的规范。

因此,我认为这本书是不会过时的。尤其是书中介绍的方法论,任何代码的背后都需要有一个“原因”来支撑。

这个“原因”是多样性的,它可能是某一个规范(如 ECMAScript 规范或 WHATWG 中关于 HTML 的解析规范),也可能是某个浏览器的 Bug,更可能是工具或语言的 limitation。

7ed248e0e48b4c7b5db955135b858b8c.gif

如何为 Vue.js 社区做贡献?

为 Vue.js 社区做贡献的方式是多种多样的,我们欢迎任何种类的贡献,无论哪一种贡献,都值得给予足够的尊重。

对于这本书而言,我也将其定义成是为 Vue.js 社区做贡献的一种方式,旨在帮助大家更好的学习并使用 Vue.js

社区里存在着各种各样的角色,并非一定要以提交代码的方式才算贡献。在一定程度上来说,深度使用 Vue.js 并提供有意义的反馈信息甚至要比提交代码的贡献还大。而社区内也的的确确存在这样的角色,并且 Vue.js 团队也非常欢迎并尊重他们。

社区的强大与否,很大一部分由生态决定。曾有一段时间我专注为 Vue.js 3 的核心做贡献,这也是我有信心完成这本书的最重要原因之一。

Vue.js 的核心将仍然由尤大领导,我本人未来会在 Vue.js 的社区项目建设和探索方向做更多的尝试。正如我给自己立的 2022 年的 flag:

863691c8a9817dd0c771c701d7b788f4.png

基于这个目标,现在已经有了一些小的成果。为了解析 Vue SFC 中的<style>块,我开发了 Telecss

026d8ccb58dc051577bff41af96cf3d8.png

再来一张图书的照片:

cf0c5e0d449e7ef1bffced0bf21d9d8c.png

最后,感谢为这本书写推荐序/语的各位大佬,以及所有支持这本书的读者,非常感谢,感恩~

希望我像按约定完成这本书一样,也能在 2022 年底按约定完成这个 flag。同时我也有一些新的想法,希望能够顺带着完成。为 Vue.js 的社区多样性添砖加瓦,大家一起加油!!!

cf3d0e9f7b476b55b779794e54ccb679.png

文末福利

小伙伴们,可以在本文留言区留言任意内容参与抽奖~

抽奖规则:在我的公众号留言超过3次的小伙伴中随机抽1位

其余留言再随机抽1位

另外源码共读提交5次及以上笔记的小伙伴群里(仅30多人)抽1位

截止时间:3月7日晚8点

获得新书《Vue.js设计与实现》包邮送。

中奖小伙伴,我会联系兑奖。也可以提前扫码加我微信 ruochuan12 以防失联。或者发送源码两字参与源码共读。

3e1e322234a13a5d583fa00c5c0702d0.png

979c94f22e2b826a23f9d719b674df95.gif

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274867.shtml

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

相关文章

分享memcache和memcached安装过程(转)

Memcache是什么&#xff1f;源代码地址&#xff1a;http://code.google.com/p/memcached/downloads/list Memcache是一个自由和开放源代码、高性能、分配的内存对象缓存系统。用于加速动态web应用程序&#xff0c;减轻数据库负载。 它可以应对任意多个连接&#xff0c;使用非阻…

LINQ之路 5:LINQ查询表达式

书写LINQ查询时又两种语法可供选择&#xff1a;方法语法&#xff08;Fluent Syntax&#xff09;和查询表达式&#xff08;Query Expression&#xff09;。 LINQ方法语法的本质是通过扩展方法和Lambda表达式来创建查询。C# 3.0对于LINQ表达式还引入了声明式的查询表达式&#xf…

调查谋杀案以换取Obra Dinn

回顾性 (RETROSPECTIVE) I am not sure if this is intentional, but Lucas Pope has a knack for turning the mundane into something special. This was evident in his release of Papers Please. In that game, you’re a border patrolman trying to provide for your fa…

9年前的大一,我们这样为女生过37女生节【祝节日快乐】

这是一篇水文~没啥目的&#xff0c;若说要有&#xff0c;就是希望大家参加源码共读学起来。公众号后台显示所有读者朋友中大约有23%的女生。前端工程师中女生应该占比相对多些。祝关注我公众号的女生3.7女生节快乐&#xff0c;大部分公司明天应该都有半天假期。可以留言大学时你…

Jquery ajax 访问调用带参数的服务方法!

页面脚本中的写法: $.ajax({url: "http://localhost:3510/WebSite/WebService/ExceptionRecoder.asmx/SetExceptionInfo",contentType: "application/json; charsetutf-8", type: "POST", dataType: "js…

requests模块发送带headers的Get请求和带参数的请求

1.在PyCharm开发工具中新建try_params.py文件&#xff1b; 2.try_params.py文件中编写代码&#xff1a; import requests#设置请求Headers头部header {"User-Agent" : "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;"}#请求输入参数p…

面试官问:跨域请求如何携带cookie?

大家好&#xff0c;我是若‍川。持续组织了6个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列本文…

Method not found: '!!0[] System.Array.Empty()'.

一开始不知道啥情况&#xff0c;原来是自己把.net 框架改成4.6.1了&#xff0c;客户机是4.0 so.... 把项目改低点&#xff0c;就ok了。转载于:https://www.cnblogs.com/ZaraNet/p/11100207.html

记录点滴8

第8~9周 4月7日~4月22日 第八周的时候实在太多东西要做了&#xff0c;我把写周记这件事给忘了&#xff0c;其实也没太大关系&#xff0c;写跟不写之间也没有太大的鸿沟&#xff0c;只是写了之后&#xff0c;会让我的记忆更加清晰&#xff0c;让自己明白&#xff0c;最近自己做了…

ux设计中的各种地图_移动应用程序设计中的常见UX错误

ux设计中的各种地图Have you ever tried a new app, only to realize you have no idea how to use it?您是否曾经尝试过一个新的应用程序&#xff0c;却发现自己不知道如何使用它&#xff1f; Few things can transport a person from calm and happy, to frustrated and an…

如何使用 Node 后端创建 React 应用程序:完整指南

大家好&#xff0c;我是若川。持续组织了6个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列React…

FP error code老是忘记的看这里:只给出最常用的几个。

把常见的几个记牢&#xff0c;不要在比赛时纠结。 错误2&#xff1a;输入文件未找到。 错误106&#xff1a;数据读入的格式错误&#xff0c;往往是读入语句出错。 错误200&#xff1a;被零除。 错误201&#xff1a;范围检查错误&#xff0c;数组越界。 错误202&#xff1a;栈溢…

快速求幂算法

1 #include <stdio.h>2 #include <math.h>3 //递归算法4 int recursion(int a,int b)5 {6 int tem 1;7 if(b0)return 1;8 else if(b1)return a;9 tem recursion(a,b>>1); 10 tem tem*tem; 11 if(b&1) tem tem * a; 12 r…

工业仪器仪表 界面设计_如何设计时尚的仪表板界面

工业仪器仪表 界面设计重点 (Top highlight)Welcome to the second step by step UI guide. Since you really liked my first article on “How to achieve Friendly, Lightweight UI”, I decided to make another one in a similar manner. Please note, that this is not a…

linux ifconfig命令参数及用法详解--linux查看配置网卡命令

ifconfig 是一个用来查看、配置、启用或禁用网络接口的工具&#xff0c;这个工具极为常用的。可以用这个工具来临时性的配置网卡的IP地址、掩码、广播地址、网关等。也可以把 它写入一个文件中&#xff08;比如/etc/rc.d/rc.local)&#xff0c;这样系统引导后&#xff0c;会读取…

给3月要跳槽的前端提个醒!不了解微前端就别去面试了,不然……

在后端架构发展史上&#xff0c;如果要找一个低耦合高内聚架构模式的典范&#xff0c;微服务当仁不让。在互联网业务急速扩张的背景下&#xff0c;微服务架构解决了后端服务中的“重”&#xff0c;让每个服务都能够独立部署、独立扩展&#xff0c;每个服务都具有稳固的模块边界…

调试 SharePoint 解决方案

调试 SharePoint 解决方案 可以使用 Visual Studio 调试器来调试 SharePoint 解决方案。 启动调试后&#xff0c;Visual Studio 会将项目文件部署到 SharePoint Server&#xff0c;然后在Web 浏览器中打开 SharePoint 网站的一个实例。 以下各节说明如何在 Visual Studio 中调试…

ui和ux的区别_UI和UX之间的区别

ui和ux的区别You’ve probably heard a lot of self-proclaimed “UX/UI” designers out there, the word “UI” thrown around endlessly at Apple keynotes, or tech startups saying “we need to fix the UX here and the UX there.”Ÿouve可能听说过很多自称“UX / UI”…

给UIWebView增加搜索栏

在xib文件中拖入UIWebView。使用代码为UIWebView的滚动控件增加搜索栏&#xff1a;UISearchBar* searchBar[[[UISearchBar alloc]initWithFrame:CGRectMake(0, -44, 320, 44)]autorelease];[self.browser.scrollView addSubview:searchBar];self.topBarsearchBar;[[self.browse…

用JS轻松实现一个录音、录像、录屏工具库

大家好&#xff0c;我是若川。持续组织了6个月源码共读活动&#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与&#xff0c;每周大家一起学习200行左右的源码&#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列前言最…