前情提要

之前在没有接触vue3之前           ，就买了一本书：vue.js设计与实现 --霍春阳（基于vue3）一直没有时间看  
 
  
 
  
 
  
 
  
 
  
，最近几天我看完了整本书










，获益颇深
  
  
  
  
  
 ，使得我对框架的认识和编写项目时的动作更加得心应手  
  
  
  
  
 ，由此我将记录此书中对于各模块的概览内容
 


 


 


 


 


 
，目的如下：

帮助入门vue开发者对框架概念有一个轮廓 给自己留下记忆碎片
 
 
 
 
 
，以便将来使用

这篇文章中我将只会记录概念相关   
   
   
   
   
  ，不涉及代码
 

 

 

 

 

 
，如果想结合代码学习

 

 

 

 

 
，我推荐前往阅读 vue.js设计与实现 --霍春阳 这本书            ，霍前辈在书中的样例思路清晰
 
 

 
 

 
 

 
 

 
 

 
，代码逻辑严密










，阅读此书                 ，会有一次js高级编程的体验；

框架设计概览

命令式

jquery就是典型的命令式框架 
 
 
 
 
 
 
 
 
 
 
，通过执行各种链式函数完成动作
















，其一大特点是关注过程–做事的过程；

声明式

声明式框架会更加关注结果           ，过程交由框架完成  
 
  
 
  
 
  
 
  
 
  
，例如vue.js的内部实现一定是命令式的










，而暴露给用户的却更加声明式；

小结

vue是内部封装了命令式代码才完成了面向用户的声明式
  
  
  
  
  
 ，所以声明式代码的性能不优于命令式代码的性能  
  
  
  
  
 ，但是却带来了极高的可维护性
 


 


 


 


 


 
，而vue框架要做的就是在保持可维护性的同时
 
 
 
 
 
，使性能损失最小；

虚拟dom性能

操作dom的方式有三种   
   
   
   
   
  ，原生js
 

 

 

 

 

 
，虚拟dom

 

 

 

 

 
，innerHTML, 不可以简单下定论            ，如结合维护性
 
 

 
 

 
 

 
 

 
 

 
，心智负担










，更新策略来看                 ，虚拟dom是很好的选择;

运行时和编译时

三种框架设计选择

运行时：不分析内容来源 
 
 
 
 
 
 
 
 
 
 
，提供固定功能 编译时：分析用户提供的内容
















，做相应处理           ，有损灵活 运行时+编译时：vue3使用的架构模式

框架设计核心要素

友好的警告信息（问题位置） 控制生产环境体积 (Tree-Shaking) 良好的兼容性 (对象式API,组合式API)  
 
  
 
  
 
  
 
  
 
  
，用户可以通过特性开关










，从而利用Tree-Shaking 机制排除 使用TS编写框架和对TS类型支持友好是俩件事
  
  
  
  
  
 ，支持ts需要花费额外的精力；

声明式描述UI

直接使用虚拟DOM描述UI  
  
  
  
  
 ，用户不需要关注过程；

渲染器

把虚拟DOM对象渲染为真实DOM对象
 


 


 


 


 


 
，实现方式是递归遍历虚拟DOM对象
 
 
 
 
 
，并调用原生DOM-API 完成真实DOM创建   
   
   
   
   
  ，其精髓在于后续的DIFF算法；

组件的本质

一组虚拟DOM元素的封装
 

 

 

 

 

 
，可以是一个返回的虚拟DOM函数

 

 

 

 

 
，也可以是一个对象            ，但这个对象下必须要有一个函数用来产出组件要渲染的虚拟DOM

vue.js模板

vue.js模板会被一个叫做编译器的程序编译为渲染函数；编译器和渲染器都是vue.js的核心部分；

响应式系统

概念

在理解响应式实现原理之前
 
 

 
 

 
 

 
 

 
 

 
，理解副作用函数更重要










，副作用函数就是在执行时会影响其他地方的函数执行                 ，vue.js3 采用proxy实现响应式数据 
 
 
 
 
 
 
 
 
 
 
，通过拦截数据的get,和set 方法
















，这个过程需要清晰的思路；

完善的响应式系统

使用WeakMap 配合Map构建了新的桶结构           ，使响应式数据与副作用函数建立精确的联系；

WeakMap 对象：弱引用  
 
  
 
  
 
  
 
  
 
  
，不影响垃圾回收器的工作
  
  
  
  
  
 。当用户代码对一个对象没有引用关系时










，WeakMap 不会阻止垃圾回收机制回收该对象 
  
  
  
  
  。

响应式系统的调度

期望有能力决定副作用函数的执行时机           、次数及方式；

计算属性Computed

原理上是一个懒执行的副作用函数
  
  
  
  
  
 ，在读取时重新计算其真正的值

watch 原理

利用副作用函数重新执行时的可调度性  
  
  
  
  
 ，当依赖的响应式数据发生变化时
 


 


 


 


 


 
，执行effect的调度器函数
 
 
 
 
 
，即回调；此外   
   
   
   
   
  ，一个立即执行的watch函数通过添加immediate选项来实现
 

 

 

 

 

 
，通过flush选项指定回调函数的执行时机

 

 

 

 

 
，本质上是利用了调用器和异步的微任务队列；

竞态问题

带入场景简单理解就是            ，watch的回调
 
 

 
 

 
 

 
 

 
 

 
，存在异步










，第二次更新覆盖第一次的回调执行内容；

非原始值的响应式方案

vue.js 3的响应式数据是基于Proxy 实现的                 ，所以有必要理解Proxy及Reflect;

Proxy对象可以创建一个代理对象 
 
 
 
 
 
 
 
 
 
 
，从而实现对其他对象的代理
















，代理指的是对一个对象基本语义的代理           ，允许我们拦截并重新定义对一个对象的基本操作  
 
  
 
  
 
  
 
  
 
  
，其中基本语义可以理解为对一个对象的读取和设置操作； Reflect对象具有和Proxy同样的方法










，其特别之处在于可以接受第三个参数
  
  
  
  
  
 ，receiver  
  
  
  
  
 ，即接收者
 


 


 


 


 


 
，可以理解为函数调用过程中的this;

响应式的实现不只是简单的拦截get/set内部方法
 
 
 
 
 
，更有迭代对象的拦截   
   
   
   
   
  ，例如for…in,for…of
 

 

 

 

 

 
，set,map,这些具有特征的对象

 

 

 

 

 
，都需要特别处理；

javaScript 对象

有俩种对象            ，一种为常规对象
 
 

 
 

 
 

 
 

 
 

 
，另一种叫异质对象










，其区别在于内部的实现方法；

原始值的响应式方案

原始值指的是Boolean  
 
  
 
  
 
  
 
  
 
  
、Number










、BigInt
  
  
  
  
  
 、String  
  
  
  
  
 、Symbol
 


 


 


 


 


 
、undefined
 
 
 
 
 
、null等类型                 ，在js中原始值是按值传递的而非引用传递；

ref

ref实质上是一个包裹对象 
 
 
 
 
 
 
 
 
 
 
，由于Proxy无法提供对原始值的代理
















，所以用一层对象包裹           ，间接实现响应式  
 
  
 
  
 
  
 
  
 
  
，这也就是为什么在使用中需要.value;

toRef,toRefs

ref不仅可以用于原始值响应式方案










，也能用来解决响应式丢失
  
  
  
  
  
 ，这也就是toRef及toRefs出现的理由  
  
  
  
  
 ，toRef是代理一个对象的响应式值
 


 


 


 


 


 
，toRefs则是多个
 
 
 
 
 
，本质上是对响应式数据作的包装   
   
   
   
   
  ，或者叫访问代理
 

 

 

 

 

 
，我们知道一般的响应式对象如reactive包裹的对象通过解构后会丢失响应式

 

 

 

 

 
，那么可以在解构的时候通过toRef函数进行一次代理访问来保持响应式特性 


 


 


 


 


 

。

渲染器

用来执行渲染任务            ，是渲染真实DOM和跨平台能力的关键
 
 

 
 

 
 

 
 

 
 

 
，渲染器把虚拟dom渲染为真实dom的过程叫作挂载










，通常用英文mount表达
 
 
 
 
 
。

渲染器与响应式系统

利用响应式系统的能力                 ，可以做到数据编号自动更新页面 
 
 
 
 
 
 
 
 
 
 
，渲染器会执行挂载和打补丁操作
















，对于新内容           ，会执行挂载  
 
  
 
  
 
  
 
  
 
  
，而就内容










，会执行打补丁操作
  
  
  
  
  
 ，只更新新的node;

自定义渲染器

在浏览器平台  
  
  
  
  
 ，渲染器可以利用DOM API完成DOM操作
 


 


 


 


 


 
，为了不直接依赖浏览器
 
 
 
 
 
，将这些操作封装为可配置的对象   
   
   
   
   
  ，用户可以在调用createRenderer函数创建渲染器的时候自定义配置对象
 

 

 

 

 

 
，从而实现自定义的行为；

挂载与更新

在这里我学到了HTML的节点的属性比想象中复杂

 

 

 

 

 
，其中有俩个重要概念            ，HTML Attributes 和DOM Properties 并不完全对应
 
 

 
 

 
 

 
 

 
 

 
，有的属性甚至是只读的










，所以vue在属性的挂载上做了足够的工作; vue.js对特殊属性也做了属性增强                 ，例如 class, style  
 
 
 
 
 
 
 
 
 
 
，它们支持 字符
















，对象           ，数组 三种数据的格式；

简单Diff 算法

为了减少新旧node节点性能开销  
 
  
 
  
 
  
 
  
 
  
，完成更新操作










，这个比较的算法就是diff算法
  
  
  
  
  
 ，渲染器的核心就是diff算法  
  
  
  
  
 ，试图最大程度的复用DOM元素；简单diff算法的核心逻辑是
 


 


 


 


 


 
，拿新的一组子节点中的节点去旧的一组子节点中寻找可复用节点  
   
   
   
   
   。这个过程中key的作用就像是身份证号
 
 
 
 
 
，在更新时通过key找到可复用的节点   
   
   
   
   
  ，避免过多的对DOM元素进行销毁和重建 

 

 

 

 

 
。

双端Diff 算法

指的是在新旧俩组子节点的四个端点之间分别进行比较
 

 

 

 

 

 
，并试图找到可复用的节点

 

 

 

 

 
，优势在于执行的DOM移动操作次数更少

 

 

 

 

 

。

快速Diff算法

在实测中性能最优            ，借鉴了文本Diff中的预处理思路
 
 

 
 

 
 

 
 

 
 

 
，先处理新旧俩组节点中相同的前置节点和相同的后置节点










，当全部节点处理完毕后                 ，如果无法简单的操作不存在的节点完成更新 
 
 
 
 
 
 
 
 
 
 
，会根据节点的索引关系
















，构造出一个最长递增子序列           ，其中最长递增子序列指向的节点则是不需要移动的节点           。例如[2,8,9,0,3,5,7] 中 最长递增子序列为[0,3,5,7],这一部分对应的索引节点  
 
  
 
  
 
  
 
  
 
  
，就可以不去移动










，从而提升diff性能;

组件化

组件化的能力可以使一个大模板变成一个个小模板
  
  
  
  
  
 ，从而使组件可以组合  
  
  
  
  
 ，组成完整的页面
 


 


 


 


 


 
，其核心也需要渲染器支持；

描述组件

利用虚拟节点的vnode.type属性来存储对象
 
 
 
 
 
，渲染器根据虚拟节点的该属性类型来判断它是否是组件 
 

 
 

 
 

 
 

 
 

 
 。

setup函数

该函数为了组合式API而生   
   
   
   
   
  ，要避免其与vue.js 2 中的传统组件选项混合使用
 

 

 

 

 

 
，setup函数的返回值可以是俩种类型

 

 

 

 

 
，如果是返回函数            ，则该函数作为组件的渲染函数；如果返回数据对象
 
 

 
 

 
 

 
 

 
 

 
，则将该对象暴露在渲染上下文中











。

异步组件

异步组件的实现并不复杂










，用户也可以利用promise来自行实现                 ，但是一个完善的异步组件仍然需要考虑很多问题如：

允许用户指定加载出错时要渲染的组件 允许用户指定Loading组件 
 
 
 
 
 
 
 
 
 
 
，以及展示该组件的延迟时间 允许用户设置加载组件的超时时长 组件加载失败时
















，为用户提供重试的能力

因此vue.js 3 提供了defineAsyncComponent函数           ，用来自定义异步组件；

内建组件和模块

KeepAlive   
   
   
   
   
  、Teleport
 

 

 

 

 

 
、Transition 组件  
 
  
 
  
 
  
 
  
 
  
，共同特点是与渲染器结合紧密










，需要框架提供底层的实现与支持；

KeepAlive组件的作用类似于HTTP中的持久连接
  
  
  
  
  
 ，可以避免组件不断的被销毁和重建造成的性能开销；实现核心是将组件放入一个隐藏容器中  
  
  
  
  
 ，从而使得可以维持当前状态
 


 


 


 


 


 
，当被挂载时
 
 
 
 
 
，将它从隐藏容器搬到原容器中                。

Teleport组件可以完成跨越层级渲染   
   
   
   
   
  ，在很多场景下有用
 

 

 

 

 

 
，例如loader,弹出层等；

Transition组件的核心思想是将动效的过程分为多个阶段

 

 

 

 

 
，在挂载的钩子中动态为其添加样式 
 
 
 
 
 
 
 
 
 
 
 。

编译器

vue.js 的模板和JSX都属于领域特定语言            ，它们的实现难度属于中

 

 

 

 

 
、低级别
 
 

 
 

 
 

 
 

 
 

 
，只要掌握基本的编译技术理论即可实现功能；

vuejs的模板编译器

工作步骤

分析模板










，将其解析为AST模板 将模板AST转换为用于描述渲染函数的JavaScript AST 根据JavaScript AST生成渲染函数代码

AST树构成原理

用有限状态机构造一个词法分析器                 ，词法分析过程就是状态机在不同状态之间迁移的过程
















。 过程中产生一个个TOKEN,形成列表 扫描Token列表并维护一个开始标签 每扫到一个开始标签节点 
 
 
 
 
 
 
 
 
 
 
，就将其压入栈顶
















，栈顶节点始终为下一扫码节点的父节点 扫描完毕形成树形AST

解析器

解析器本质上是一个状态机           ，正则表达式其实也是一个状态机  
 
  
 
  
 
  
 
  
 
  
，因此在编写parser的时候利用正则表达式可以更加效率；

文本模式：解析器在工作时所进入的一些特殊状态










，如RCDATA,CDATA,RAWTEXT模式
  
  
  
  
  
 ，以及初始DATA模式  
  
  
  
  
 ，不同的模式
 


 


 


 


 


 
，解析器对文本解析会有所不同；

递归下降算法：不断递归调用解析子节点函数的过程是递归的含义
 
 
 
 
 
，下降的含义是随着被递归调用的下降parseChildren函数去构造下级模板AST节点;

编译优化

编译优化是通过编译的手段提取关键信息   
   
   
   
   
  ，并以此指导生成最优代码的过程
 

 

 

 

 

 
，关键点在区分 动态节点 与静态节点;vue3会为动态节点打上标签

 

 

 

 

 
，在编译时只关注动态节点的更新；

Vue.js 3 在编译优化方面还做了其他努力            ，具体如下：

静态提升：能够减少更新时创建虚拟DOM带来的性能开销和内存占用 预字符串化: 在镜头提升的基础上
 
 

 
 

 
 

 
 

 
 

 
，对静态节点进行字符串化










，可以减少创建虚拟节点产生的性能开销及内存占用; 缓存内联事件处理函数：避免造成不必要的组件更新 v-once指令 ：缓存全部或部分虚拟节点                 ，能够避免组件更新时重新创建虚拟DOM带来的性能开销 
 
 
 
 
 
 
 
 
 
 
，也可以避免无用的Diff操作

服务端渲染

vue.js可以实现的渲染方式

客户端渲染( client-side-rendering, CSR) 服务端渲染(server-side-rendering, SSR) 同构渲染（isomorphic rendering）

渲染比对

SSR CSR 同构渲染 SEO 友好 不友好 友好 白屏问题 无 有 无 占用服务端资源 多 少 中 用户体验 差 好 好

基于此表可以看出同构渲染是一种高级且优秀的渲染方案
















，实现流程：

服务端渲染静态HTML字符串并发送给浏览器 浏览器渲染静态HTML静态字符串内容 下载打包在静态资源中的组件代码 浏览器会解析并执行该组件代码 浏览器激活DOM 在虚拟节点与真实DOM元素之间建立联系           ，即vnode.el = el;这样才能保证后续的程序正确运行 为DOM元素添加事件绑定

注意事项

钩子函数不会在服务端执行 注意跨平台API 特定端实现  
 
  
 
  
 
  
 
  
 
  
，利用cookie信息










，在服务端需要从请求头获取
  
  
  
  
  
 ，而客户端却是document.cookie 避免交叉请求引起的状态污染  
  
  
  
  
 ，因为服务器的一对多特性 仅在客户端渲染组件中的部分内容
 


 


 


 


 


 
，自行封装 组件
 
 
 
 
 
，利用onMounted钩子函数只会在客户端运行的原理;

最后

📚 vue

☃️ 个人简介：一个喜爱技术的人           。

🌞 励志格言: 脚踏实地   
   
   
   
   
  ，虚心学习 
 
  
 
  
 
  
 
  
 
  
 。

❗如果文章还可以
 

 

 

 

 

 
，记得用你可爱的小手点赞👍关注✅

 

 

 

 

 
，我会在第一时间回            、回访            ，欢迎进一步交流










。