花圃

# 理解 CDN 及其原理 # CDN 是什么 CDN (Content Delivery Network) 内容分发网络， 是一种靠互联网连接的电脑网络系统，它根据用户所在的区域，选择离用户最近的服务器来将相关文件发送给用户，以此提供更快速，更稳定的网络内容分发服务。 # CDN 由什么组成 分发服务系统 分发服务系统最基本的工作单位是 Cache 设备，cache 设备负责直接响应用户的请求，将缓存在本地的内容快速的提供给用户，并且负责与源站点进行同步，将更新的内容，本地没有的内容，缓存到本地 负载均衡系统，...

# 什么是执行上下文 简单地说，执行上下文是评估和执行 Javascript 代码的环境的一个抽象概念。任何代码在 JavaScript 中运行时，都在执行上下文中运行。 # 执行上下文的类型 全局执行上下文 默认的，基础的执行上下文，任何不在函数内部的代码都在全局执行上下文中，全局执行上下文只能有一个。 函数执行上下文 函数被调用时创建的执行上下文，程序中可以有多个函数执行上下文 Eval 函数执行上下文 Eval 函数内部的代码执行时也会有自己的执行上下文，但是我们一般不使用 Eval 函数，所以这里我们不讨论。 #...

# JS 继承的实现方式 原型链式继承 第一种是以原型链的方式来实现继承，也就是把子类的原型赋值为父类的实例对象。但是这种实现方式存在的缺点是，这个作为子类原型的父类实例对象上的属性会被所有的实例对象所共享，容易造成修改的混乱（修改了，会影响所有的子类对象）。还有就是在创建子类型的时候不能向父类构造函数传递参数。 盗用构造函数式继承 第二种方式是使用借用构造函数的方式，也就是在子类中调用父类的构造函数，通过 call 方法将 this...

# 手写 promise # 完整代码 const PENDING = Symbol('pending');const FULFILL = Symbol('resolve');const REJECT = Symbol('reject');class myPromise { constructor(executor) { /* 初始化 promise pending 状态 */ this.status = PENDING; /* 记录当前 promise 兑现值和拒因 */ this.value =...

# 浏览器中的事件循环 # 同步与异步 浏览器是单线程的，所以为了不堵塞代码的运行，我们将任务分为了同步任务，和异步任务（ setTimeout 和 setInterval 、 axios 、事件绑定等这种带回调函数的），那么同步任务和异步任务又是按照怎样的顺序进入主线程执行的呢，废话不多说，直接上图好叭 😎 先看一段代码，我们会结合这张图和代码来先简单认识一下同步和异步的执行 执行的结果很简单 start -> end -> 时间到了 整个 script 代码进入主线程，遇到同步任务 start 的打印，执行打印 遇到异步任务 setTimeout ，将...

# effect 方法剖析与实现 # 完整代码 export type EffectFn = { (): any; deps: Array<Set<EffectFn>>; options?: Options;};type Options = { scheduler?: (fn: EffectFn) => void; lazy?: boolean;};let activeEffect: EffectFn;const effectStarck:...

# 文档描述 接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。 具有缓存机制，只有当依赖的响应式数据发生改变的时候才会重新计算，否则会直接读取缓存的值 # 实现思路 computed 返回的是一个 ref ，所以我们需要一个类来进行 get value , set value 的操作 当依赖的响应式数据发生改变时会重新计算，所以需要引入 effect 函数来注册依赖副作用，并进行依赖的收集和触发操作，收集的依赖就是...

# 文档介绍 接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。 # 实现原理 因为返回的是一个 ref 对象，所以需要一个 RefImpl 类，在类里面进行 get value 和 set value 操作 get value 里进行依赖的收集， set value 里进行依赖的触发 # 完整代码 import { hasChanged, isObject } from '../utils/index';import { track, trigger...

# 文档描述 侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。 watch () 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。 watch 的第一个参数可以是不同形式的 “数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组： # 实现思路 因为监听的响应式对象 or getter 函数返回的响应式数据发生改变的时候，就要执行回调函数 callback ，所以需要引入 effect 函数来进行副作用函数依赖的注册，收集，触发，收集的依赖也就是 getter 函数 当监听的对象 or getter...

# 简单介绍 vue3 中对带有 key 的子节点是利用快速 diff 算法进行更新的 # 快速 diff 算法基本原理 首先进行预处理，设置一个指向数组头部的指针 j ，再通过新旧数组的长度 - 1 来获取指向新旧数组尾部的指针 newEndIndex , oldEndIndex 。 判断新旧头节点，新旧尾节点的 key 是否相同，相同则调用 patch 函数进行，并将指向头节点的指针 j 向下移动，指向尾节点的指针 newEndIndex , oldEndIndex 向上移动，以此循环，直到遇到 key...