petite-vue-源码剖析-v-for重新渲染工作原理

数字追雪人
• 阅读 1756

在《petite-vue源码剖析-v-if和v-for的工作原理》我们了解到v-for在静态视图中的工作原理,而这里我们将深入了解在更新渲染时v-for是如何运作的。

逐行解析

// 文件 ./src/directives/for.ts

/* [\s\S]*表示识别空格字符和非空格字符若干个,默认为贪婪模式,即 `(item, index) in value` 就会匹配整个字符串。
 * 修改为[\s\S]*?则为懒惰模式,即`(item, index) in value`只会匹配`(item, index)`
 */
const forAliasRE = /([\s\S]*?)\s+(?:in)\s+([\s\S]*?)/
// 用于移除`(item, index)`中的`(`和`)`
const stripParentRE= /^\(|\)$/g
// 用于匹配`item, index`中的`, index`,那么就可以抽取出value和index来独立处理
const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/

type KeyToIndexMap = Map<any, number>

// 为便于理解,我们假设只接受`v-for="val in values"`的形式,并且所有入参都是有效的,对入参有效性、解构等代码进行了删减
export const _for = (el: Element, exp: string, ctx: Context) => {
  // 通过正则表达式抽取表达式字符串中`in`两侧的子表达式字符串
  const inMatch = exp.match(forAliasRE)

  // 保存下一轮遍历解析的模板节点
  const nextNode = el.nextSibling

  // 插入锚点,并将带`v-for`的元素从DOM树移除
  const parent = el.parentElement!
  const anchor = new Text('')
  parent.insertBefore(anchor, el)
  parent.removeChild(el)

  const sourceExp = inMatch[2].trim() // 获取`(item, index) in value`中`value`
  let valueExp = inMatch[1].trim().replace(stripParentRE, '').trim() // 获取`(item, index) in value`中`item, index`
  let indexExp: string | undefined

  let keyAttr = 'key'
  let keyExp = 
    el.getAttribute(keyAttr) ||
    el.getAttribute(keyAttr = ':key') ||
    el.getAttribute(keyAttr = 'v-bind:key')
  if (keyExp) {
    el.removeAttribute(keyExp)
    // 将表达式序列化,如`value`序列化为`"value"`,这样就不会参与后面的表达式运算
    if (keyAttr === 'key') keyExp = JSON.stringify(keyExp)
  }

  let match
  if (match = valueExp.match(forIteratorRE)) {
    valueExp = valueExp.replace(forIteratorRE, '').trim() // 获取`item, index`中的item
    indexExp = match[1].trim()  // 获取`item, index`中的index
  }

  let mounted = false // false表示首次渲染,true表示重新渲染
  let blocks: Block[]
  let childCtxs: Context[]
  let keyToIndexMap: KeyToIndexMap // 用于记录key和索引的关系,当发生重新渲染时则复用元素

  const createChildContexts = (source: unknown): [Context[], KeyToIndexMap] => {
    const map: KeyToIndexMap = new Map()
    const ctxs: Context[] = []

    if (isArray(source)) {
      for (let i = 0; i < source.length; i++) {
        ctxs.push(createChildContext(map, source[i], i))
      }
    }  

    return [ctxs, map]
  }

  // 以集合元素为基础创建独立的作用域
  const createChildContext = (
    map: KeyToIndexMap,
    value: any, // the item of collection
    index: number // the index of item of collection
  ): Context => {
    const data: any = {}
    data[valueExp] = value
    indexExp && (data[indexExp] = index)
    // 为每个子元素创建独立的作用域
    const childCtx = createScopedContext(ctx, data)
    // key表达式在对应子元素的作用域下运算
    const key = keyExp ? evaluate(childCtx.scope, keyExp) : index
    map.set(key, index)
    childCtx.key = key

    return childCtx
  }

  // 为每个子元素创建块对象
  const mountBlock = (ctx: Conext, ref: Node) => {
    const block = new Block(el, ctx)
    block.key = ctx.key
    block.insert(parent, ref)
    return block
  }

  ctx.effect(() => {
    const source = evaluate(ctx.scope, sourceExp) // 运算出`(item, index) in items`中items的真实值
    const prevKeyToIndexMap = keyToIndexMap
    // 生成新的作用域,并计算`key`,`:key`或`v-bind:key`
    ;[childCtxs, keyToIndexMap] = createChildContexts(source)
    if (!mounted) {
      // 为每个子元素创建块对象,解析子元素的子孙元素后插入DOM树
      blocks = childCtxs.map(s => mountBlock(s, anchor))
      mounted = true
    }
    else {
      // 更新渲染逻辑!!
      // 根据key移除更新后不存在的元素
      for (let i = 0; i < blocks.length; i++) {
        if (!keyToIndexMap.has(blocks[i].key)) {
          blocks[i].remove()
        }
      }

      const nextBlocks: Block[] = []
      let i = childCtxs.length
      let nextBlock: Block | undefined
      let prevMovedBlock: Block | undefined
      while (i--) {
        const childCtx = childCtxs[i]
        const oldIndex = prevKeyToIndexMap.get(childCtx.key)
        let block
        if (oldIndex == null) {
          // 旧视图中没有该元素,因此创建一个新的块对象
          block = mountBlock(childCtx, newBlock ? newBlock.el : anchor)
        }
        else {
          // 旧视图中有该元素,元素复用
          block = blocks[oldIndex]
          // 更新作用域,由于元素下的`:value`,`{{value}}`等都会跟踪scope对应属性的变化,因此这里只需要更新作用域上的属性,即可触发子元素的更新渲染
          Object.assign(block.ctx.scope, childCtx.scope)
          if (oldIndex != i) {
            // 元素在新旧视图中的位置不同,需要移动
            if (
              blocks[oldIndex + 1] !== nextBlock ||
              prevMoveBlock === nextBlock
            ) {
              prevMovedBlock = block
              // anchor作为同级子元素的末尾
              block.insert(parent, nextBlock ? nextBlock.el : anchor)
            }
          }
        }
        nextBlocks.unshift(nextBlock = block)
      }
      blocks = nextBlocks
    }
  })

  return nextNode
}

难点突破

上述代码最难理解就是通过key复用元素那一段了

const nextBlocks: Block[] = []
let i = childCtxs.length
let nextBlock: Block | undefined
let prevMovedBlock: Block | undefined
while (i--) {
  const childCtx = childCtxs[i]
  const oldIndex = prevKeyToIndexMap.get(childCtx.key)
  let block
  if (oldIndex == null) {
    // 旧视图中没有该元素,因此创建一个新的块对象
    block = mountBlock(childCtx, newBlock ? newBlock.el : anchor)
  }
  else {
    // 旧视图中有该元素,元素复用
    block = blocks[oldIndex]
    // 更新作用域,由于元素下的`:value`,`{{value}}`等都会跟踪scope对应属性的变化,因此这里只需要更新作用域上的属性,即可触发子元素的更新渲染
    Object.assign(block.ctx.scope, childCtx.scope)
    if (oldIndex != i) {
      // 元素在新旧视图中的位置不同,需要移动
      if (
        /* blocks[oldIndex + 1] !== nextBlock 用于对重复键减少没必要的移动(如旧视图为1224,新视图为1242)
         * prevMoveBlock === nextBlock 用于处理如旧视图为123,新视图为312时,blocks[oldIndex + 1] === nextBlock导致无法执行元素移动操作
         */
        blocks[oldIndex + 1] !== nextBlock || 
        prevMoveBlock === nextBlock
      ) {
        prevMovedBlock = block
        // anchor作为同级子元素的末尾
        block.insert(parent, nextBlock ? nextBlock.el : anchor)
      }
    }
  }
  nextBlocks.unshift(nextBlock = block)
}

我们可以通过示例通过人肉单步调试理解

示例1

旧视图(已渲染): 1,2,3
新视图(待渲染): 3,2,1

  1. 循环第一轮

    childCtx.key = 1
    i = 2
    oldIndex = 0
    nextBlock = null
    prevMovedBlock = null

    prevMoveBlock === nextBlock
    于是将旧视图的block移动到最后,视图(已渲染): 2,3,1

  2. 循环第二轮

    childCtx.key = 2
    i = 1
    oldIndex = 1

    更新作用域

  3. 循环第三轮

    childCtx.key = 3
    i = 0
    oldIndex = 2
    nextBlock = block(.key=2)
    prevMovedBlock = block(.key=1)

    于是将旧视图的block移动到nextBlock前,视图(已渲染): 3,2,1

示例2 - 存在重复键

旧视图(已渲染): 1,2,2,4
新视图(待渲染): 1,2,4,2

此时prevKeyToIndexMap.get(2)返回2,而位于索引为1的2的信息被后者覆盖了。

  1. 循环第一轮

    childCtx.key = 2
    i = 3
    oldIndex = 2
    nextBlock = null
    prevMovedBlock = null

    于是将旧视图的block移动到最后,视图(已渲染): 1,2,4,2

  2. 循环第二轮

    childCtx.key = 4
    i = 2
    oldIndex = 3
    nextBlock = block(.key=2)
    prevMovedBlock = block(.key=2)

    于是将旧视图的block移动到nextBlock前,视图(已渲染): 1,2,4,2

  3. 循环第三轮

    childCtx.key = 2
    i = 1
    oldIndex = 2
    nextBlock = block(.key=4)
    prevMovedBlock = block(.key=4)

    由于blocks[oldIndex+1] === nextBlock,因此不用移动元素

  4. 循环第四轮

    childCtx.key = 1
    i = 0
    oldIndex = 0

    由于i === oldIndex,因此不用移动元素

和React通过key复用元素的区别?

React通过key复用元素是采取如下算法

  1. 第一次遍历新旧元素(左到右)

    1. 若key不同即跳出遍历,进入第二轮遍历

      • 此时通过变量lastPlacedIndex记录最后一个key匹配的旧元素位置用于控制旧元素移动
    2. 若key相同但元素类型不同,则创建新元素替换掉旧元素
  2. 遍历剩下未遍历的旧元素 - 以旧元素.key为键,旧元素为值通过Map存储
  3. 第二次遍历剩下未遍历的新元素(左到右)

    1. 从Map查找是否存在的旧元素,若没有则创建新元素
    2. 若存在则按如下规则操作:

      • 若从Map查找的旧元素的位置大于lastPlacedIndex则将旧元素的位置赋值给lastPlacedIndex,若元素类型相同则复用旧元素,否则创建新元素替换掉旧元素
      • 若从Map查找的旧元素的位置小于lastPlacedIndex则表示旧元素向右移动,若元素类型相同则复用旧元素,否则创建新元素替换掉旧元素(lastPlacedIndex的值保持不变)
  4. 最后剩下未遍历的旧元素将被删除

第二次遍历时移动判断是,假定lastPlacedIndex左侧的旧元素已经和新元素匹配且已排序,若发现旧元素的位置小于lastPlacedIndex,则表示lastPlacedIndex左侧有异类必须向右挪动。

petite-vue的算法是

  1. 每次渲染时都会生成以元素.key为键,元素为值通过Map存储,并通过prevKeyToIndexMap保留指向上一次渲染的Map
  2. 遍历旧元素,通过当前Map筛选出当前渲染中将被移除的元素,并注意移除
  3. 遍历新元素(右到左)

    1. 若key相同则复用
    2. 若key不同则通过旧Map寻找旧元素,并插入最右最近一个已处理的元素前面

它们的差别

  1. petite-vue无法处理key相同但元素类型不同的情况(应该说不用处理比较适合),而React可以

    // petite-vue
    createApp({
      App: {
        // 根本没有可能key相同而元素类型不同嘛
        $template: `
        <div v-for="item in items" :key="item.id"></div>
        `
      }
    })
    
    // React
    function App() {
      const items = [...]
      return (
        items.map(item => {
          if (item.type === 'span') {
            return (<span key={item.id}></span>)
          }
          else {
            return (<div key={item.id}></div>)
          }
        })
      )
    }
  2. 由于petite-vue对重复key进行优化,而React会对重复key执行同样的判断和操作
  3. petite-vue是即时移动元素,而React是运算后再移动元素,并且对于旧视图为123,新视图为312而言,petite-vue将移动3次元素,而React仅移动2次元素

后续

和DOM节点增删相关的操作我们已经了解得差不多了,后面我们一起阅读关于事件绑定、属性和v-modal等指令的源码吧!

《Petite-Vue源码剖析》小册子

《Petite-Vue源码剖析》结合示例从在线渲染、响应式系统和沙箱模型分别对源码逐行解读,其中还对响应式系统中利用JS引擎的SMI优化依赖清理算法作详细分析。绝对是入门Vue3源码前绝佳的踏脚石喜欢的话记得转发、赞赏哦!

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
亚瑟 亚瑟
4年前
Flutter - Flutter渲染机制—GPU线程
基于Flutter1.5,从源码视角来深入剖析flutter渲染机制,相关源码目录见文末附录一、GPU线程渲染看Flutter的渲染绘制过程的核心过程包括在ui线程和gpu线程,上一篇文章已经详细介绍了UI线程的工作原理,本文则介绍GPU线程的工作原理,这里需要注意的是,gpu线程是指运行着GPUTaskRunner的名叫gpu
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable