2.5k 2 分钟

# ractive 方法剖析与实现 # 完整代码实现 import { isArray, isObject, hasChanged } from '../utils/index';import { effect, track, trigger } from './effect';export function reactive(target: any) { if (!isObject(target)) return target; if...
6.8k 6 分钟

# createApp 作用 返回一个带有 mount 方法的对象 App 在 mount 方法里会调用 h 函数,来根据通过 createApp 方法传递的组件对象生成虚拟 DOM vnode ,然后调用 render 函数来将 vnode 转换为真实 DOM,然后挂载在指定的 DOM 节点 # 完整代码 import { isString } from '../utils/index';import { render } from './render';import...
5.6k 5 分钟

# 执行 processElement 函数来对 Element 类型的 vnode 做处理 判断 oldVnode 是否为 null,是则执行 mountElement 函数对 vnode 进行挂载 不是则执行 patch 函数来对 vnode 做更新 # 完整代码 function processElement( oldVnode: TypeElementVnode | null | undefined, newVnode: TypeElementVnode, container: VElement, anchor: VElement | VChildNode | null =...
900 1 分钟

# Fragment 节点简单介绍 是一种模板节点,实际上并不会渲染,只会渲染它的子节点 # 执行 processFragment 来完成对 Fragment 类型的虚拟 DOM 的处理 通过 oldVnode.el 来获取 Fragment 的头锚点,如果没有就创建一个空文本节点作为头锚点,通过 oldVnode.anchor 来获取 Fragment 的尾锚点,如果没有就创建一个空文本节点来作为尾锚点。 如果 oldVnode.el 为 null,则执行挂载操作,先挂载头锚点,再挂载尾锚点,然后调用 patchChildren,并利用 anchor...
1.6k 1 分钟

# 组件的被动更新发生的场景 父组件里嵌套了子组件,父组件在进行自更新的时候,会调用 patch 函数来更新 subtree ,subtree 更新的过程中就会调用 patch 函数来进行对子组件的更新,patch 函数发现是对组件的更新,就会调用 processComponent 函数,Component 函数就会调用 updateComponent 函数来进行对组件的更新 # 执行 updateComponent 来完成组件的被动更新 将旧虚拟 DOM oldVnode 的组件实例赋值给新虚拟 DOM 的组件实例 将新虚拟 DOM 赋值给组件实例的 next 属性 调用组件实列的...
2.6k 2 分钟

# 为什么需要 Promise?🤔 # 明白同步任务 and 异步任务 首先,前端 er 们需要明确一点,在 js 这种单线程的事件循环模型中,一件事情没做完是不能做下一件事情的。这时候睿智的友友们就会说这又咋了呢,会有什么问题吗?哎嘿,还真有问题,问题还大了,要是中间有一件事情耗时太长,导致后面耗时很短的事情做不了怎么办呢?你看,这不就堵车了,还会堵很久。但是我们聪明的前端 er 们马上就有了解决方法,我们先不管那个耗时很长的事情,先做后面的事情,最后再管这个耗时很长的事情不就完事了吗 😁。 对的,就是这种解决方案,敲黑板 😸,js...