花圃

# 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...

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

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

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

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

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

一只前端小白