程序员经验分享-hwhale

推荐2022前端必看的新书 《Vue.js设计与实现》

2023-05-16

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

这本新书后续我应该会抽奖送几本，敬请期待。

今天推荐一本我认为2022年前端进阶需要看的一本书，来自Vue官方团队成员霍春阳的新书《Vue.js设计与实现》

很久之前我跟春阳面基的时候就知道他在写一本关于Vue3原理的书，上个月一起吃火锅知道他写完了，赶紧厚脸皮要了一本签名版样书，还有尊贵的专享标签，昨天到货后马上捧读了一晚上，今天上午看完后写了这个全球首发的测评，为什么是首发呢？毕竟本书的作者还没拿到样书  （狗头）

058d5355f653a7ae9274ac4b9ab5c10e.png

介绍下Vue这个框架

Vuejs是国内最流行的前端框架之一，可以吧一个普通的数据封装为响应式数据，数据修改之后就会自动通知到页面更新，开发者只需要关注数据，对新手非常友好，除了响应式系统，还有组件化，虚拟Dom，单文件组件，配套全家桶等功能让Vue也能轻松应对复杂项目，也成为了各大中小公司前端技术选型的首选，最近Vue刚把默认版本改成了Vue3，对Vue2进行了全面的升级，下面这张图可以看到Vue3的新特性 ，全部使用Typescript重构，全新的响应式和虚拟dom系统，Composition api以及自定义渲染器等功能，我相信Vue3也会在2022年逐渐普及开来，继续和React在国内的前端生态中独领风骚

bb4e3d39f477073be9502b90b14d5ed0.png

再说下本书的特点

这本书并不是Vue3的入门教程，而是从整体上介绍Vue3的设计思想和原理解读，解读源码的同时，而是能够你在更高的视野和维度去理解这个框架，现在Vue3已经成为了vue的默认版本，2022年Vue3也会越来越普及，面试也会出现越来越多Vue3相关的面试题  这本书绝对应该放在前端工程师的2022年必读书里 之前有一本vue2源码解读的书《深入浅出Vue.js》，现在可以直接看这本Vue3的源码书了

本书一共六章，一共18篇，501页 全是Vue3原理和设计理念的硬货

7701fc4a21d7b7140f92ba232b7cc4a5.png

第一篇三篇主要介绍框架的设计理念，首先介绍前端框架中关于命令式，声明式，虚拟dom，运行时和编译时的权衡理念，然后介绍了前端框架设计需要考虑的因素，比如体积，开发体验，特性开关，错误处理等，最后介绍Vue.js在这些理念中做了哪些设计和权衡 看完第一章，和面试官谈笑风生问题不大，但是如果被问到了细节，就需要后面的章节强化，下图是Vue最核心模块的依赖关系

85a51a0178490845ec27eeb97e157258.png

第二章三篇响应式系统，Vue中最大的特色之一就是响应式系统，简直就是各大面试官的万年面试题，社区里关于响应式原理的解读文章也是一抓一大片，霍春阳作为Vue3贡献度第二的维护者，给出了更加详细的解读，首先响应式系统里除了Proxy代理数据的主流程外，如何做代理的清理，effect函数的嵌套，computed和watch的实现，以及过期副作用的竞态问题，并且还分析了Javascript规范文件中关于Proxy的细节分析，通过规范的定义来介绍如何代理obj，set，map等数据结构，这个细致程度绝对值得你收藏，最后介绍了下原始值的代理函数ref的实现细节，虽然我看过好几遍Vue的源码了，这篇响应式的剖析还是让我有所收获

8561c3ccf071551b1e4237df6e7c40da.png

第三章五篇渲染器讲的就是vue如何基于响应式系统，把节点渲染到浏览器之上，包括节点的挂载和更新，节点事件，class等属性的更新，虚拟Dom的更新逻辑，详细的介绍了双端的diff算法，其中大家最感兴趣的最长递增子序列也有详细的图解分析，其中简单diff是React fiber之前的算法，双端diff是vue2使用的算法，快速diff是现在Vue3使用的算法，这样我们也完全了解了虚拟Dom这个技术在Vue和React的发展

第四章三篇组件化，无论是vue还是react，组件化机制都让我们可以像搭积木一样去开发网页，组件设计最重要的就是外部传递的属性，组件对外暴露的事件，以及内部的扩展，这一章讲解了Vue中组件如何渲染，更新，还有生命周期等执行逻辑，并且扩展了异步组件和函数组件的实现原理，并且介绍了内建组件keep-alive, teleport 和transition的原理

2de292dbedf0b918390c97dd326cf8de.png

三四两章结合在一起，就是Vue3的在浏览器里运行的全部逻辑了

然后就是第五章三篇编译器，包括编译器和解释器的入门，包括状态机，AST等概念的科普，详细的剖析了vue中template是如何变成render function的过程，也是对计算机专业课编译原理的回顾，最后讲解了Vue中到底做了哪些编译时期的优化，如何通过位运算对虚拟dom进行静态标记，从而尽可能提高Vue运行时的性能，还有block tree，缓存函数等优化方式，对我们平时做项目优化也提供了很好的思路

第六章一篇服务端渲染 最后一章主要介绍Vue在服务器端渲染的一些api和工作方式，如果你正在研究Vue的服务端渲染，这一节会对你有帮助，主要就是如何在node环境下把组件生成为字符串去渲染首屏，并且在客户端能够激活，可以作为对ssr感兴趣的同学专门阅读

作者介绍

然后介绍下作者把，Vue官方团队的霍春阳，从Vue3的contributor上来看仅次于尤雨溪，可以说是最适合写Vue3设计理念书籍的人之一，他本人的经历也非常的励志，普通本科（退学）非科班转行做前端，凭着高中学历进入过字节，然后离职全职做了一段时间开源，负责维护Vue3框架，是我非常佩服的程序员之一，他的成长经历也激励着很多前端，下周我约了这本书的作者霍春阳录一个采访视频，可能还有签名书赠送，大家有什么想问的，欢迎在留言

93e102a4ed3572b8f330bd0952a040ec.png

最后总结一下 本书虽好，但是如果你期望只通过读书就能成为源码高手是不可能的事，你需要老老实实的把vue3的源码下载下来，分模块依次去看，并且在和React Angular对比，去逐步学习框架设计的理念，而且任何书籍本身都是作者的观点表述，我们研究源码的过程中也要敢于质疑和提问，并且在调试源码的过程中求证逐步消化 而且本书主要是讲原理，所以大家有些场景下需要配合leetcode刷题来看效率更高，比如146题lru缓存帮我们理解keep-alive缓存的设计，136题只出现依次的数组帮助我们理解Vue编译优化的位运算，300题最长递增子序列帮助我们理解虚拟dom的diff算法，最后大家可以私聊我获取这张Vue3原理全景图

a59f862b53900b636e01cc5dfdccaf61.png

祝大家都能看懂源码，2022年和面试官谈笑风生，对了 我们下期再见

b2695363d75f0992d008bbe240465b3b.gif

················· 若川简介 ·················

你好，我是若川，毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇，在知乎、掘金收获超百万阅读。
从2014年起，每年都会写一篇年度总结，已经写了7篇，点击查看年度总结。
同时，最近组织了源码共读活动，帮助3000+前端人学会看源码。公众号愿景：帮助5年内前端人走向前列。

e2618708e4375a7a33673ca5c075bce8.png

识别上方二维码加我微信、拉你进源码共读群

今日话题

略。分享、收藏、点赞、在看我的文章就是对我最大的支持~

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

推荐2022前端必看的新书 《Vue.js设计与实现》 的相关文章

  • 前端之浏览器

    你会不会和我一样 xff0c 开发了N年 xff0c 真要讲起浏览器 xff0c 发现自己一无所知 常用那几种浏览器测试 xff1f IE Safari Chrome Mozilla Firefox Opera 主流浏览器的内核有哪些 xf

  • Navicat远程连接Linux环境下MySQL(错误error:1045/1251/2003(10038)/2059)解决方案

    Navicat远程连接Linux环境下MySQL 错误error 1045 1251 2003 10038 2059 解决方案 心路历程 因为之后要学习有关数据库开发的课程 xff0c 我们需要部署云服务器并添加mysql功能 xff0c

  • MAX30102 血氧调试笔记

    一 血氧测量原理 1 1 PPG波形介绍 血氧饱和度 xff08 英语 xff1a Oxygen saturation xff09 xff0c 或称血氧浓度 xff0c 是指血中氧饱和血红蛋白相对于总血红蛋白 xff08 不饱和 43 饱和

  • HBase - Filter - 过滤器的介绍以及使用 | 那伊抹微笑

    博文作者 xff1a 那伊抹微笑 csdn 博客地址 xff1a http blog csdn net u012185296 itdog8 地址链接 http www itdog8 com thread 214 1 1 html 博文标题

  • sphereface:deep hypersphere embedding for face recognition

    SphereFace算法详解 AI之路 CSDN博客 sphereface 论文 xff1a SphereFace Deep Hypersphere Embedding for Face Recognition 论文链接 xff1a htt

  • python中的isdigit( )的使用

    python中的isdigit 函数是检测输入字符串是否只由数字组成 第三个例子既包含数字 xff0c 也包含字符串的话 xff0c 返回的也是一个False的布尔值 举例 xff1a

  • Debian没有sudo怎么办

    和Ubuntu不同 xff0c sudo命令在原始的Debian系统中时没有的 xff0c 需要额外安装 sudo apt get install sudo 编辑配置文件 xff0c 增加一个可以使用sudo命令的用户名 UserName

  • ES6——给对象部署Iterator接口

    Iterator接口的目的就是为所有数据结构提供一种统一访问的机制 xff0c 用for of 实现 一个数据结构只要有Symbol iterator属性 xff0c 就可以认为是 可遍历的 原型部署了Iterator接口的数据结构有三种

  • 我还在坚持的道路上

    高考 xff0c 一个似乎已经久远的经历但却又有一种恍如昨日的感觉 记得那年 2012年 xff0c 考完最后一场 xff0c 下着大暴雨 xff0c 那一刻有一种终于解放的窃喜但内心又憋着无形的鸭梨 xff0c 不知道最后结果会怎样 不过

  • CodeBlocks的下载安装、配置、简单编程

    IDE简介 http www baidu com s wd 61 codeblocks xff0c 这里只是介绍Windows平台下的 IDE 环境配置 CodeBlocks的下载 安装 配置 xff1a 下载 xff1a http www

  • 四、安装cuDNN，caffe和openCV

    一 安装cuDNN 1 下载cudnn 可以注册再下载 不过有点麻烦 官网https developer nvidia com cudnn 或者百度云下载http pan baidu com s 1hrAMHko 2 安装 tar span

  • 网络爬虫（三）------宽度优先爬虫（一个的基础，简单但是很重要哦）

    在实际项目中 xff0c 我们使用爬虫遍历互联网 xff0c 把网络中相关的网页全部抓取过来 xff0c 这也体现了爬虫的特点 爬虫爬行的过程是这样子的 xff1a 互联网中每一个页面看作是一个节点 xff0c 页面中的链接可以看成图的有向

  • Win10+Ubuntu双系统修复Ubuntu系统引导

    这两天笔者安装win10 43 ubuntu16 04双系统 xff0c 因为网络上能找到大量的资料 xff0c 安装过程此处就不多讲 因为笔者电脑是华硕主板 xff0c bios默认设置为安全启动 xff0c 笔者猜测会阻止加载ubunt

  • 全面分析 Spring 的编程式事务管理及声明式事务管理

    关于本教程 本教程将深入讲解 Spring 简单而强大的事务管理功能 xff0c 包括编程式事务和声明式事务 通过对本教程的学习 xff0c 您将能够理解 Spring 事务管理的本质 xff0c 并灵活运用之 先决条件 本教程假定您已经掌

  • classpath*作用

    classpath It refers to a list of resources and loads all such files present in the classpath and list can be empty and i

  • java 8 根据map 字段值 去重

    java 8 根据map 字段值 去重 span class token class name List span span class token generics span class token punctuation lt span

  • java 8 去重

    span class token comment 取差集 span span class token class name List span span class token generics span class token punct

  • 解读程序员的武侠世界，顶级程序员是内外兼修的大侠，那么你呢？

    在漫天的星河中 xff0c 有这样一颗星 xff0c 他朴实无华 xff0c 却又熠熠生辉 xff0c 照亮了无数人的人生 他就是金庸先生 随着一代大侠的驾鹤西去 xff0c 飞雪连天射白鹿 xff0c 笑书神侠倚碧鸳 xff0c 成为绝响

  • Eclipse使用入门教程

    Eclipse使用入门教程 说起java的IDE xff0c 朗朗上口的无非是Eclipse了 xff0c 假若能熟练Eclipse xff0c 对于我们编写java程序会起到事半功倍的效果 xff0c 大大提高我们工作效率 因此本篇博文

  • Win7 + Ubuntu16.04 双系统安装

    之前安装win7 43 Ubuntu14 04双系统 xff0c 后来换成win10用了一段时间后觉得有些卡 xff0c 而且装双系统装了几次都成功 xff0c 所以又换回了win7系统 xff0c 并重新安装了win7 43 Ubuntu

随机推荐

  • 双系统Ubuntu 引导修复（Boot Repair）

    安装完双系统 xff0c 如果在使用过程中不小心删除了Ubuntu引导向 xff0c 则会导致开机后无法选择进入Ubuntu系统 或者当我们重装了windows系统后 xff0c 也会发现原来的Ubuntu引导不见了 xff0c 当出现这两

  • 数据库为何要有复合主键（多主键）

    最近学习一点数据库的基本知识 xff0c 被一个问题困惑了许久 xff1a 主键是唯一的索引 xff0c 那么为何一个表可以创建多个主键呢 xff1f 其实 主键是唯一的索引 这话有点歧义的 举个例子 xff0c 我们在表中创建了一个ID字

  • @JSONField 注解详解和应用

    讲到 64 JSONField 注解 xff0c 就不得不提到Alibaba 开源的fasejson fastjson是目前java语言中最快的json库 xff0c 比自称最快的jackson速度要快 xff0c 第三方独立测试结果看这里

  • 外部访问docker容器(docker run -p/-P 指令)

    容器中可以运行一些网络应用 xff0c 要让外部也可以访问这些应用 xff0c 可以通过 P xff08 大写 xff09 或 p xff08 小写 xff09 参数来指定端口映射 xff08 1 xff09 当使用 P 标记时 xff0c

  • 解决Spring Boot和Feign中使用Java 8时间日期API（LocalDate等）的序列化问题

    LocalDate LocalTime LocalDateTime 是Java 8开始提供的时间日期API xff0c 主要用来优化Java 8以前对于时间日期的处理操作 然而 xff0c 我们在使用Spring Boot或使用Spring

  • gcc 编译选项

    原来 Os相当于 O2 5 是使用了所有 O2的优化选项 xff0c 但又不缩减代码尺寸的方法 ffunction sections fdata sections Place each function or data item into

  • RYU功能开发（一）从simple switch开始

    对于任意一款控制器 xff0c 想要快速了解其开发机制 xff0c 从转发模块入手无疑是最佳的学习方式 RYU通过App的形式提供了一系列功能模块 xff0c 其中包括使用了OpenFlow作为控制协议的二层交换机控制模块simple sw

  • arm-linux-gcc交叉工具链

    Linux ARM交叉编译工具链制作过程 一 下载源文件 源代码文件及其版本与下载地址 xff1a Binutils 2 19 tar bz2 Index of gnu binutils gcc 4 4 4 tar bz2 Index of

  • 我使用过的Linux命令之cal - 显示日历

    我使用过的Linux命令之cal 显示日历 本文链接 xff1a http codingstandards iteye com blog 807962 xff08 转载请注明出处 xff09 用途说明 cal命令可以用来显示公历 xff08

  • 驼峰式与下划线命名规则

    在实际代码开发过程中 xff0c 代码编写格式清晰与否不仅决定了自己的代码编写与维护成本 xff0c 也直接影响到项目的开发进度 编码中常用的有驼峰法和下划线两种编码格式 xff0c 其中驼峰法常用在面向对象的高层语言中 xff0c 下划线

  • 全图文分析：如何利用Google的protobuf，来思考、设计、实现自己的RPC框架

    文章目录 一 前言二 RPC 基础概念1 RPC 是什么 xff1f 2 需要解决什么问题 xff1f 3 有哪些开源实现 xff1f 三 protobuf 基本使用1 基本知识2 使用步骤 四 libevent1 libevent 简介2

  • 针对vue的配置文件

    针对vue的配置文件 我们在根目录下创建一个 vue config js 文件 xff0c 将下方配置下去 module exports 61 区分打包环境与开发环境 process env NODE ENV 61 61 61 39 pro

  • Linux | LVM | 对比三种逻辑卷（Logic Volume）

    概述 为了满足在性能和冗余等方面的需求 xff0c LVM支持了下面三种Logic Volume xff1a Linear Logic Volume 线性逻辑卷Striped Logic Volume 条带化逻辑卷Mirror Logic

  • MySql ERROR 1129

    ERROR 1129 HY000 Host 39 mysql02 39 is blocked because of many connection errors unblock with 39 mysqladmin flush hosts

  • SpringBoot整合Shiro

    Apache Shiro是一个强大且易用的Java安全框架 执行身份验证 授权 密码学和会话管理 相比较Spring Security xff0c shiro有小巧 简单 易上手等的优点 所以很多框架都在使用shiro Shiro包含了三个

  • PB数据窗口对象之Button

    Button 重要属性 Action 属性 该属性是Button 控件最重要的一个属性 在数据窗口画板中 xff0c 可以选择一个按钮有哪个动作 可选的动作都是事先定义好的 xff0c 开发人员没有机会精确定义某个动作的执行 xff0c 只

  • 聊聊前端八股文？

    大家好 xff0c 我是若川 xff0c 点此加我微信进源码群 xff0c 一起学习源码 同时可以进群免费看Vue专场直播 xff0c 有尤雨溪分享 Vue3 生态现状以及展望 前些天 xff0c 我看到 剑指前端offer 一系列文章 x

  • 新手向：前端程序员必学基本技能——调试JS代码

    1前言 大家好 xff0c 我是若川 最近组织了源码共读活动 xff0c 感兴趣的可以加我微信 ruochuan12 参与 xff0c 已进行三个月了 xff0c 大家一起交流学习 xff0c 共同进步 想学源码 xff0c 极力推荐之前我

  • 全新的 Vue3 状态管理工具：Pinia

    大家好 xff0c 我是若川 最近组织了源码共读活动 xff0c 感兴趣的可以点此加我微信 ruochuan12 参与 xff0c 每周大家一起学习200行左右的源码 xff0c 共同进步 同时极力推荐订阅我写的 学习源码整体架构系列 包含

  • 推荐2022前端必看的新书 《Vue.js设计与实现》

    大家好 xff0c 我是若川 持续组织了6个月源码共读活动 xff0c 感兴趣的可以点此加我微信 ruochuan12 参与 xff0c 每周大家一起学习200行左右的源码 xff0c 共同进步 同时极力推荐订阅我写的 学习源码整体架构系列

热门标签