花圃

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

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

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

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

一只前端小白