Jw
首页
技术
英语
首页
技术
英语
  • 01-权衡的艺术

    • 1.1 命令式与声明式
    • 1.2 性能与可维护性的权衡
    • 1.3 虚拟DOM的性能到底如何
    • 1.4 运行时和编译时
  • 02-框架设计的核心要素

    • 2.1 提升用户的开发体验
    • 2.2 控制框架代码的体积
    • 2.3 框架要做到良好的 Tree-Shaking
    • 2.4 框架应该输出怎样的构建产物
    • 2.5 特性开关
    • 2.6 错误处理
    • 2.7 良好的 TypeScript 类型支持
  • 03-Vue.js 3 的设计思路

    • 3.1 声明式地描述UI
    • 3.2 初识渲染器
    • 3.3 组件的本质
    • 3.4 模板的工作原理
    • 3.5 Vue.js 是各个模块组成的有机整体
  • 04-响应系统的作用与实现

    • 4.1 响应式数据与副作用函数
    • 4.2 响应式数据的基本实现
    • 4.3 设计一个完善的响应系统
    • 4.4 分支切换与 cleanup
    • 4.5 嵌套的effect与effect栈
    • 4.6 避免无限递归循环
    • 4.7 调度执行
    • 4.8 计算属性 computed 与 lazy
    • 4.9 watch 的实现原理
    • 4.10 立即执行的 watch 与回调执行时机
    • 4.11 过期的副作用
  • 05-非原始值的响应式方案

    • 5.1 理解 Proxy 和 Reflect
    • 5.2 JavaScript 对象及 Proxy 的工作原理
    • 5.3 如何代理 Object
    • 5.4 合理地触发响应
    • 5.5 浅响应与深响应
    • 5.6 只读和浅只读
    • 5.7 代理数组
    • 5.7.1 数组的索引与 length
    • 5.7.2 遍历数组
    • 5.7.3 数组的查找方法
    • 5.7.4 隐式修改数组长度的原型方法
    • 5.8 代理 Set 和 Map
    • 5.8.1 如何代理Set和Map
    • 5.8.2 建立响应联系
    • 5.8.3 避免污染原始数据
    • 5.8.4 处理forEach
    • 5.8.5 迭代器方法
    • 5.8.6 values与keys方法
  • 06-原始值的响应式方案

    • 6.1 引入 ref 的概念
    • 6.2 响应丢失问题
    • 6.3 自动脱ref
  • 07-渲染器的设计

    • 7.1 渲染器与响应系统的结合
    • 7.2 渲染器的基本概念
    • 7.3 自定义渲染器
  • 08-挂载与更新

    • 8.1 挂载子节点和元素的属性
    • 8.2 HTML Attributes 与 DOM Properties
    • 8.3 正确地设置元素属性
    • 8.4 class的处理
    • 8.5 卸载操作
    • 8.6 区分vnode类型
    • 8.7 事件的处理
    • 8.8 事件冒泡与更新时机问题
    • 8.9 更新子节点
    • 8.10 文本节点和注释节点
    • 8.11 Fragment
  • 09-简单 Diff 算法

    • 9.1 减少 DOM 操作的性能开销
    • 9.2 DOM 复用与 key 的作用
    • 9.3 找到需要移动的元素
    • 9.4 如何移动元素
    • 9.5 添加新元素
    • 9.6 移除不存在的元素
  • 10-双端 Diff 算法

    • 10.1 双端比较的原理
    • 10.3 非理想状况的处理方式
    • 10.4 添加新元素
    • 10.5 移除不存在的元素
  • 11-快速 Diff 算法

    • 11.1 相同的前置元素和后置元素
    • 11.2 判断是否需要进行 DOM 移动操作
    • 11.3 如何移动元素
  • 12-组件的实现原理

    • 12.1 渲染组件
    • 12.2 组件状态与自更新
    • 12.3 组件实例与组件的生命周期
    • 12.4 props与组件的被动更新
    • 12.5 setup 函数的作用与实现
    • 12.6 组件事件与 emit 的实现
    • 12.7 插槽的工作原理与实现
    • 12.8 注册生命周期
  • 13-异步组件与函数式组件

    • 13.1 异步组件要解决的问题
    • 13.2.1 封装defineAsyncComponent函数
    • 13.2.2 超时与 Error 组件
    • 13.2.3 延迟与 Loading 组件
    • 13.2.4 重试机制
    • 13.3 函数式组件
  • 14-内建组件和模块

    • 14.1.1 组件的激活与失活
    • 14.1.2 include 和 exclude
    • 14.1.3 缓存管理
    • 14.2.1 Teleport 组件要解决的问题
    • 14.2.2 实现 Teleport 组件
    • 14.3.1 原生 DOM 的过渡
    • 14.3.2 实现 Transition 组件
  • 15-编译器核心技术概览

    • 15.1 模板 DSL 的编译器
    • 15.2 parser 的实现原理与状态机
    • 15.3 构造AST
    • 15.4 AST 的转换与插件化架构
    • 15.4.1 节点的访问
    • 15.4.2 转换上下文与节点操作
    • 15.4.3 进入与退出
    • 15.5 将模板 AST 转为 JavaScript AST
    • 15.6 代码生成
  • 16-解析器

    • 16.1 文本模式及其对解析器的影响
    • 16.2 递归下降算法构造模板 AST
    • 16.3 状态机的开启与停止
    • 16.4 解析标签节点
    • 16.5 解析属性
    • 16.6.1 解析文本
    • 16.6.2 解码命名字符引用
    • 16.6.3 解码数字字符引用
    • 16.7 解析插值与注释
  • 17-编译优化

    • 17.1.1 传统Diff算法问题
    • 17.1.2 Block 与 PatchFlags
    • 17.1.3 收集动态节点
    • 17.1.4 渲染器的运行时支持
    • 17.2.1 带有 v-if 指令的节点
    • 17.2.2 带有 v-for 指令的节点
    • 17.2.3 Fragment 的稳定性
    • 17.3 静态提升
    • 17.4 预字符串化
    • 17.5 缓存内联事件处理函数
    • 17.6 v-once
  • 18-同构渲染

    • 18.1 CSR、SSR 以及同构渲染
    • 18.2 将虚拟 DOM 渲染为 HTML 字符串
    • 18.3 将组件渲染为 HTML 字符串
    • 18.4 客户端激活的原理
    • 18.5.1 组件的生命周期
    • 18.5.2 使用跨平台的 API
    • 18.5.3 只在某一端引入模块
    • 18.5.4 避免交叉请求引起的状态污染
    • 18.5.5 ClientOnly 组件

9.3 找到需要移动的元素

用 lastIndex 记录旧 children 中已匹配节点的最大下标,凡是匹配到更小下标的节点,就是需要移动的节点。

一、思路:维护 lastIndex

遍历新 children,为每个节点在旧 children 中找到相同 key 的节点(下标为 j):

  • lastIndex 表示「寻找过程中遇到的最大索引值」(旧 children 里已匹配节点的最大下标);
  • 只要出现 j < lastIndex,说明该节点在新序列中跑到了前面,其对应的真实 DOM 需要移动;
  • 否则 lastIndex = j,把最大值更新。
// 用来存储寻找过程中遇到的最大索引值
let lastIndex = 0
// 遍历新的 children
for (let i = 0; i < newChildren.length; i++) {
  const newVNode = newChildren[i]
  // 遍历旧的 children
  for (let j = 0; j < oldChildren.length; j++) {
    const oldVNode = oldChildren[j]
    if (newVNode.key === oldVNode.key) {
      patch(oldVNode, newVNode, container)
      if (j < lastIndex) {
        // 索引比最大索引值还小 → 该节点对应的真实 DOM 需要移动
        console.log('move') // 本节只做标记,下一节才真正移动
      } else {
        // 索引不小于最大索引值 → 更新 lastIndex
        lastIndex = j
      }
      break // 找到即复用,必须 break
    }
  }
}

二、推演:old [p1, p2, p3] → new [p3, p1, p2]

inewVNode在旧 children 中的下标 jj < lastIndex更新后 lastIndex结论
0p32否(2 ≥ 0)2不需要移动
1p10是(0 < 2)2需要移动
2p21是(1 < 2)2需要移动

lastIndex 只增不减,代表「已经确认排在新序列靠后位置的最大旧下标」。后续节点若用了更小的旧下标,就说明它要插到前面去,因此必须移动。

三、本节只做判断

这一版只把需要移动的节点标记出来(console.log('move')),不执行任何 DOM 操作;真正的移动在 9.4 中完成。

相关

  • 9.2 DOM 复用与 key 的作用:用 key 找出可复用节点
  • 9.4 如何移动元素:用 insertBefore 把标记出的节点移动到正确位置
最近更新: 2026/10/12 00:05
Contributors: liujw
Prev
9.2 DOM 复用与 key 的作用
Next
9.4 如何移动元素