当前位置:   article > 正文

《Vue.js 设计与实现》阅读笔记_vue.js设计与实现 霍春阳

vue.js设计与实现 霍春阳

目录

一、框架设计概览

第一章:权衡的艺术

①命令式和声明式

②性能与可维护性的权衡

③运行时和编译时

第二章:框架设计的核心要素

①控制代码体积

②输出不同的构建产物

③错误提示与处理

④提升用户的开发体验

⑤TypeScript良好的可维护性

第三章:Vuejs3的设计思路

①描述UI的形式

②初始渲染器

③组件的本质

④模板 (template)的工作原理

二、响应式系统

第四章:响应系统的作用与实现

(1)副作用函数与响应式数据

(2)响应式数据的实现

 (3)构建完善的响应式系统

(4)调度系统 (scheduler)

(5)计算属性 (computed)

(6)watch 监听器的实现原理

(7)惰性执行(lazy)

(8)过期的副作用

第五章:非原始值 (对象)的响应性方案

第六章:原始值(非对象) 的响应性方案

三、渲染器

第七章:渲染器的设计

渲染器的基本概念

第八章:挂载与更新

①DOM节点操作

②属性节点操作

第九、十、十一章: Diff 算法

①本质

②步骤

四、组件化

第十二章:组件的实现原理

第十三章:异步组件与函数式组件

1️⃣异步组件

2️⃣函数式组件

第十四章:内建组件和模块

1️⃣KeepAlive

2️⃣Teleport

3️⃣Transition

五、编译器

第十五章:编译器核心技术概述

1️⃣模板 DSL的编译器

2️⃣Vue 编译流程三大步

第十六章:解析器 (parse)

第十七章:编译优化

六、服务端渲染

第十八章:同构渲染

CSR、SSR以及同构渲染



学习内容:

  1. 框架设计概览
  2. 响应式系统
  3. 渲染器
  4. 组件化
  5. 编译器
  6. 服务端渲染

这篇文章为观看这个博主笔记,详情请点击链接查看!

一小时读完《Vue.js 设计与实现》_哔哩哔哩_bilibili这是一本没有带你阅读一行源码,却可以让你在阅读完成之后,对 vue 3 所有的核心逻辑 了如指掌 的书籍。无论是 响应性、调度系统、惰性执行 ,还是 渲染器、diff 算法、编辑器三大步 ,甚至是 有限自动状态机 等所有你能想到知识,本书都可以给你答案。它就是 尤雨溪亲自做序 ,Vue 官方团队成员:霍春阳 编写的 Vue.js 设计与实现。, 视频播放量 84470、弹幕量 313、点赞数 3435、投硬币枚数 2250、收藏人数 10668、转发人数 531, 视频作者 LGD_Sunday, 作者简介 以每周一本的速度,产出《程序员专业技术书籍》讲解视频。前端专业技术知识、发展方向、面试等内容(不定期更新)。@黑马程序员-济南校区,相关视频:当你的隔壁住了一对情侣,北大韦神的发防爬虫技巧,公司月初进的实习生,面试时工资喊道12K,今天让他写个注册页,结果看到他直接打开网站抄,这我该怎么办啊,假如:a===1 && a===2 && a===3; 那么 a 是什么?,尤雨溪教你写vue 高级vue教程 源码分析 中文字幕翻译完毕,当你把js学到极致……,中国开发者海外受追捧,走近Vue作者尤雨溪的开挂人生,尤雨溪分享Vue的2023发展计划 --,【拷问】Vue和React对比,为什么大公司国外都好像更喜欢React?,10分钟写一个vue登陆页面https://www.bilibili.com/video/BV1K24y1q7eJ/?spm_id_from=333.1007.top_right_bar_window_history.content.click&vd_source=4298755c4e2edc1fe805c41cc2d7379a


一、框架设计概览

第一章:权衡的艺术

框架的设计,本身就是一种权衡的艺术。 —— 尤雨溪

①命令式和声明式

命令式:关注过程

  1. const div = document.querySelector('#app') // 获取 div
  2. div.innerText = 'hello world' // 设置文本内容
  3. div.addEventListener('click',() =>{ alert(ok') }) // 定点击事

 声明式:关注结果

<div @click=" => alert('ok')">hello world</div>

vue封装了命令式的过程,对外暴露出了声明式的结果


②性能与可维护性的权衡

1️⃣命令式与声明式

  • 命令式:直接修改的性能消耗
  • 声明式:找出差异 +直接修改

虽然命令式的性能>声明式的性能,但是声明式的可维护性 > 命令式的可维护性。

2️⃣原生 JavaScript、innerHTML、虚拟 DOM

  • 心智负担:虚拟 DOM < innerHTML < 原生JavaScript
  • 性能:innerHTML < 虚拟 DOM < 原生JavaScript
  • 可维护性:原生 JavaScript  < innerHTM < 虚拟 DOM


③运行时和编译时

运行时: runtime:

利用 render函数 直接把 虚拟 DOM 转化为,真实 DOM 元素。

没有编译过程,无法分析用户提供的内容。

编译时: compiler:
直接把 template 模板中的内容,转化为 真实DOM 元素。

可以分析用户提供的内容,没有运行时理论上性能会更好。(如:Svelte)

运行时+编译时:

(1)先把 template 模板转化为 render 函数;
(2)再利用 render 函数,把 虚拟 DOM 转化为真实 DOM

编译时:分析用户提供的内容。运行时:提供足够的灵活性(如:Vue)


第二章:框架设计的核心要素

①控制代码体积

环境变量   DEV

DEV是一个常见的环境变量,在开发过程中经常被用到。该环境变量通常表示“development”(开发)的缩写,用来指定当前运行的环境是开发环境。通过在系统中设置DEV环境变量,可以让我们的程序知道当前运行的是开发环境,从而进行相应的处理,例如输出更详细的日志信息、打开调试模式等。在实际开发中,我们可以根据需要自定义DEV环境变量的值,比如将其设置为“test”表示当前运行的是测试环境。

Tree-Shaking    ESM (ES Module)

Tree-shaking 是一种通过静态分析去除未使用代码的优化技术,一般用于 JavaScript 应用程序中,以减少应用程序的体积和加载时间。它是通过分析代码中哪些函数、变量被真正使用了来实现的,并将未使用的代码从最终打包好的文件中剔除掉,从而减小文件大小,提高网页加载性能。

ESM(ES Modules)则是 ECMAScript 6 规范中新增的模块化方案,它允许 JavaScript 代码以模块的方式组织并导出、导入变量、函数等,可以有效地解决传统 JavaScript 中命名冲突、模块依赖等问题。在使用 ESM 的过程中,由于每个模块都可以单独解析和运行,可以使用 Tree-Shaking 技术去除未使用的代码,从而使得最终生成的代码更加轻量级。这也是 ESM 和传统的 CommonJS 等模块化方案相比的一个重要优势。大多数现代 JavaScript 库和框架都已经支持使用 ESM 进行模块化开发。

②输出不同的构建产物

 packages/vue/dist

③错误提示与处理

统一的错误处理接口: callWithErrorHandling

callWithErrorHandling 函数是在 Vue.js 源码中的一个重要函数,主要用于执行一个函数并捕获其中可能抛出的异常或错误,以便更好地处理异常和错误情况。

该函数通常接收两个参数:第一个参数是要执行的函数,第二个参数为可选项的上下文对象,即函数执行上下文。在调用传入的函数时,callWithErrorHandling 函数会尝试捕获其中抛出的任何异常,如果有异常则会将其交给全局的 Vue 错误处理函数进行处理,同时会在控制台打印出错误信息以便开发者参考。如果执行函数过程中没有异常,则该函数会返回函数执行的结果。

在 Vue.js 中,callWithErrorHandling 函数被广泛地用于处理各种可能抛出异常的情况,例如组件的生命周期函数、指令的 bind 和 update 函数、渲染器的 render 函数等,都是通过 callWithErrorHandling 函数进行调用和异常处理的。该函数提供了非常方便的机制来统一处理异常情况,并且可以极大地提高代码的容错性和可维护性。

④提升用户的开发体验

  • 心智负担低
  • 便于调试

TypeScript良好的可维护性

  • 框架本身的可维护性: 使用 TS编写
  • 对TS的友好支持:大量的类型判断与处理


第三章:Vuejs3的设计思路

①描述UI的形式

声明式的模板描述

<div :id="tId" :class="{ tClass: true}" @click="onTClick"></div>


命令式的 render 函数

  1. import { h } from 'vue'
  2. export default {
  3. render() {
  4. return h('h1'onClick: handler }) // 虚拟 DOM
  5. }
  6. }


②初始渲染器

本质:函数 createRenderer 的返回值 (renderer 对象)

renderer 对象:包含 render 渲染函数

  • 参数:
    • vnode: 虚拟 DOM 对象
    • container: 挂载的容器,真实 DOM 元素
  • 作用:
    • 把 vnode挂载到 container上

③组件的本质

一组 DOM 元素的封装:一个JavaScript 对象 (vnode) ,内部封装了DOM 元素。


④模板 (template)的工作原理


二、响应式系统

第四章:响应系统的作用与实现

(1)副作用函数与响应式数据

1️⃣副作用函数:会产生副作用的函数

  1. //全局变量
  2. let val = 1
  3. function effect() {
  4. val = 2 // 修改全局变量,产生副作
  5. }


2️⃣响应式数据:会导致视图变化的数据


(2)响应式数据的实现

1️⃣核心逻辑

数据读取: getter 行为

document .body.innerText = obj.text

数据修改: setter 行为

obj.text ='hello vue3'

核心API

  • vue2:Object.defineProperty
  • vue3:Proxy

2️⃣实现逻辑图示 

1.getter 行为

 2.setter 行为

 (3)构建完善的响应式系统

(4)调度系统 (scheduler)

1️⃣响应性的可调度性

当数据更新的动作,触发副作用函数重新执行时,有能力决定:副作用函数 (effet) 执行的时机、次数以及方式。

调度系统:有能力调整输出顺序

 2️⃣实现原理

  • 异步: Promise
  • 队列: jobQueue

基于 Set 构建了队列jobQueue,利用Promise 的异步特性,控制执行顺序。


(5)计算属性 (computed)

本质:一个属性值,当依赖的响应式数据发生变化时重新计算。

计算属性的实现原理 <——依赖调度系统。

(6)watch 监听器的实现原理

本质:观测一个响应式数据,当数据发生变化时,通知并执行相应的回调函数。

实现原理<—— 调度系统 (scheduler)、惰性执行 (lazy)。


(7)惰性执行(lazy)

  1. if (!lazy) {
  2. // 执行副作用函数
  3. }

原理:boolean 型的值,可以被添加到 effect 函数中,用来控制副作用的执行。


(8)过期的副作用

1️⃣竞态问题 <—— 大量的异步操作

概念:在描述一个系统或者进程的输出,依赖于不受控制的事件出现顺序或者出现时机

  1. let finalData
  2. watch(obj,async () => {
  3. // 发送并等待网络请求
  4. const res = await fetch('/path/to/request')
  5. // 将请求结果赋值给 data
  6. finalData = res
  7. })

 2️⃣解决方式:onInvalidate: 该回调函数会在副作用下一次重新执行前调用,可以用来清除无效的副作用,例如等待中的异步请求。

  1. watch(obj,async (newValue, oldValue,onInvalidatel)=>{
  2. //定义一个标志,代表当前副作用函数是否过期,代表没有过期默认为 false
  3. let expired = false
  4. // 调用 onInvalidateC) 函数注册一个过期回调
  5. onInvalidate(() => {
  6. // 当过期时,将 expired 设置为 true
  7. expired = true
  8. })
  9. // 发送网络请求
  10. const res = await fetch('/path/to/request')
  11. //只有当该副作用函数的执行没有过期时,才会执行后续操作
  12. if (!expired) {
  13. finalData = res
  14. }
  15. })

3️⃣onInvalidate 原理
副作用函数 (effct) 重新执行前,先触发onInvalidate。


第五章:非原始值 (对象)的响应性方案

1️⃣Proxy

代理一个对象(被代理对象)的 getter 和setter 行为,得到一个 proxy 实例 (代理对象)。

2️⃣Reflect

在Proxy 中使用 this 时,保证 this 指向proxy,从而正确执行次数的副作用。


第六章:原始值(非对象) 的响应性方案

1️⃣为什么会有 ref
1.reactive 方法基于Proxy 实现,所以只能完成对象的响应性
2.针对非对象的响应性,则需要 ref 构建

2️⃣实现原理

注意:针对于最新的 vue 3.2 而言,书中在《6.1引入ref的概念》中所讲解的 ref 实现原理存在落后性”。 vue 3.2 已经修改了 ref 的实现,这得益于@basvanmeurs 的贡献。

通过 get 、set 函数标记符,让函数以属性调用的形式被触发。

  1. class RefImpl<T> {
  2. private _value: T
  3. private _rawValue: T
  4. public dep?: Dep = undefined
  5. public readonly __v_isRef = true
  6. constructor(value: T, public readonly _v_isShallow: boolean){}
  7. get value(){}
  8. set value(newVal){}
  9. }

packages/reactivity/src/ref.ts

当访问 ref.value 属性时,本质上是  value()函数 的执行。


三、渲染器


第七章:渲染器的设计

渲染器的基本概念

(1)渲染器与渲染函数

  • 渲染器: renderer
  • 渲染函数: render
  1. function createRenderer(){
  2. function render(vnode,container){
  3. //···
  4. }
  5. function hydrate(vnode,container) {
  6. //···
  7. }
  8. return{ //渲染器
  9. render, //渲染函数
  10. hydrate
  11. }
  12. }
  1. renderer: createRenderer 的返回值
  2. render: createRenderer 中的 render 函数

(2)自定义渲染器核心思路

  1. // implementation
  2. function baseCreateRenderer{···}
  1. 利用 DOM API 完成 DOM 操作在浏览器端,
  2. 渲染器不能与宿主环境 (浏览器) 产生强耦合

(3)vnode
普通的JavaScript 对象,代表了渲染的内容。

  1. // 该 vnode 用来描述普通标签
  2. const vnode = {
  3. type:'div'
  4. //···
  5. }
  6. // 该 vnode 用来描述片段
  7. const vnode = {
  8. type: Fragment
  9. //···
  10. }
  11. //该 vnode 用来描述文本节点
  12. const vnode = {
  13. type: Text
  14. //···
  15. }

第八章:挂载与更新

①DOM节点操作

挂载:DOM的初次渲染

  • 通过 createElement 新建
  • 通过 parentEl.insertBefore 插入

更新:当响应性数据发生变化时,可能会涉及到 DOM更新
属性更新 <—— 属性节点操作

卸载:该节点不在被需要了
通过 parentEl.removeChild 完成。

②属性节点操作

1.属性

1️⃣HTML Attributes:定义在HTML标签上的属性

<input id="my-input" type="text" value="foo" />

2️⃣DOM Properties:DOM 对象下的属性 ——> 正确的设置元素属性

const el = document.querySelector('#my-input')

2.正确的设置元素属性

1️⃣el.setAttribute('属性名','属性值')

2️⃣ .属性赋值

  • el.属性名属性值
  • el[属性名]=属性值
  1. // 初始状态: <textarea class="test-class"type="text"></textarea>
  2. // 获取 dom 实例
  3. const el = document.querySelector('textarea')
  4. // 1: 修改 class
  5. el.setAttribute('class','m-class') // 成功
  6. el['cLass'] ='m-class' // 失败
  7. el.className ='m-class' // 成功
  8. // 2: 修改 type
  9. el.setAttribute('type','input') // 成功
  10. el['type'] = 'input' // 失败
  11. // 3: 修改 value
  12. el.setAttribute('value','你好 世界') // 失败
  13. el['value'] ='你好 世界'// 成功

3️⃣事件

  • 添加  el.addEventListener
  • 删除  el.removeEventListener
  • 更新  vei (vue event invokers)
    • 为 addEventListener 回调函数,设置了一个value的属性方法,在回调函数中触发这个方法。通过更新该属性方法的形式,达到更新事件的目的。


第九、十、十一章: Diff 算法

①本质

一个对比的方法
“|日DOM组”更新为“新 DOM组”时,如何更新才能效率更高。

②步骤

  1. sync from start: 自前向后的对比
  2. sync from end:自后向前的对比
  3. common sequence+mount: 新节点多于旧节点,需要挂载
  4. common sequence +unmount: 日节点多于新节点,需要卸载
  5. unknown sequence: 乱序

packages/runtime-core/src/renderer.ts


四、组件化


第十二章:组件的实现原理

1️⃣组件对象

  1. // MyComponent 是一个组件,它的值是一个选项对象
  2. const MyComponent = {
  3. name: 'MyComponent',
  4. data() {
  5. return { foo: 1 }
  6. }
  7. }

2️⃣组件的 vnode:type 为组件对象的 vnode

  1. //该 vnode 用来描述组件,type 属性存储组件的选项对象
  2. const vnode = [
  3. type: MyCoponent
  4. //···
  5. }

3️⃣组件的渲染:组件对象中会包含一个 render 函数,render函数返回值时一个 vnode。渲染组件就是渲染该vnode

  1. const MyComponent ={
  2. //组件名称,可选
  3. name: 'MyComponent',
  4. // 组件的渲染函数,其返回值必须为虚拟 DOM
  5. render(){
  6. //返回虚拟 DOM
  7. return {
  8. type:'div',
  9. children:我是文本内容
  10. //通过渲染器实现
  11. }
  12. }
  13. }

4️⃣setup函数:<script setup> 只是一个语法糖

  • 返回一个函数:直接作为 render函数渲染
  • 返回一个对象:直接在render中访问暴露出来的对象数据

5️⃣插槽的工作原理与实现:

  • 插槽的本质:组件中innerHTML的内容,在vnode 中以children 属性呈现
  • 原理:针对 children 进行渲染即可

第十三章:异步组件与函数式组件

1️⃣异步组件

定义:异步加载的组件

  1. <template>
  2. <CompA />
  3. <component:is="asyncComp" />
  4. </template>
  5. <script>
  6. import {shallowRef} from 'vue'
  7. import CompA from 'CompA.vue'
  8. export default {
  9. components: { CompA },
  10. setup(){
  11. const asyncComp = shallowRef(null)
  12. //异步加载CompB组件
  13. import('CompB.vue').then(CompB => asyncComp.value = CompB)
  14. return {
  15. asyncComp
  16. }
  17. }
  18. }
  19. </script>

作用:页面性能、拆包、服务端下发组件。

2️⃣函数式组件

没有状态的组件。本质上是一个函数,通过静态属性的形式添加props 属性。


第十四章:内建组件和模块

1️⃣KeepAlive

作用:缓存一个组件,避免不断地销毁和创建

核心原理:

(1)组件被卸载时:把组件保存在一个容器中

(2)组件被挂载时:从容器中把组件取出来

2️⃣Teleport

作用:将插槽的内容渲染到其他位置

核心原理:

(1)把Teleport 组件的染逻辑,从渲染器中抽离

(2)在指定的位置进行独立渲染

3️⃣Transition

作用:实现动画逻辑

核心原理:

(1)DOM 元素被挂载时,将动效附加到该 DOM元素上。

(2)DOM 元素被卸载时,等在 DOM 元素动效执行完成后,执行卸载DOM 操作


五、编译器

第十五章:编译器核心技术概述

1️⃣模板 DSL的编译器

DSL:一种领域下,特定语言的编译器

本质:一段程序,可以把A 语言翻译成 B 语言。把 tempalte 模板,编译成 render 渲染函数

编译流程:

1.完整的编译流程

2.Vue的编译流程

2️⃣Vue 编译流程三大步

1.parse:通过parse函数,把模板编译成AST对象
2.transform:通过transform 函数,把AST转化为 JavaScript AST
3.generate:通过 generate 函数,把JavaScript AST转化为 染函数(render)

第十六章:解析器 (parse)

第十七章:编译优化

概念:通过编译的手段提取关键信息,并以此知道生成最优代码的过程
核心:

  • 动态节点受数据变化所影响的)<——Block 树
  • 静态节点(不受数据变化所影响的)

Block 树
本质:虚拟节点树对象
核心:dynamicChildren  收集所有的动态子节点。

其他优化:

静态提升
预字符串化
缓存内联事件处理函数
V-once 指令


六、服务端渲染

第十八章:同构渲染

CSR、SSR以及同构渲染

 CSR:客户端渲染:

SSR:服务端渲染

同构渲染

  • 单独的 CSR
  • 单独的SSR
  • CSR +SSR
    • 首次渲染
    • 非首次染

服务端渲染,将虚拟 DOM 染为 HTML 字符串:解析 vnode,进行字符串拼接,然后返回给客户端
服务端渲染,将组件 渲染为 HTML字符串
客户端激活的原理

  1. 为页面中的 DOM 元素与虚拟节点对象之间建立联系
  2. 为页面中的DOM元素添加事件绑定

renderer.hydrate()

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/190860
推荐阅读
相关标签
  

闽ICP备14008679号