【core/observer】之traverse方法

最新推荐文章于 2024-07-19 23:52:37 发布

大大大石頭

最新推荐文章于 2024-07-19 23:52:37 发布

阅读量1.8k

点赞数 2

分类专栏： Vue源码总结文章标签： Vue Vue源码学习

本文链接：https://blog.youkuaiyun.com/u014627807/article/details/107458235

版权

Vue源码总结专栏收录该内容

8 篇文章

订阅专栏

本文详细解析了Vue.js中数据依赖收集机制，重点介绍了traverse方法如何递归遍历对象，确保深层属性变化都能被监听。通过实例说明了在不同数据类型下，如Array和Object，依赖收集的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/* @flow */

import { _Set as Set, isObject } from '../util/index'
import type { SimpleSet } from '../util/index'
import VNode from '../vdom/vnode'

const seenObjects = new Set()

/**
 * 递归遍历一个对象以唤起所有已转换的getter，
 * 以便将objec内部的每个嵌套属性都作为“deep”依赖项收集。
 */
export function traverse (val: any) {
  _traverse(val, seenObjects)
  seenObjects.clear()
}

function _traverse (val: any, seen: SimpleSet) {
  let i, keys
  const isA = Array.isArray(val)
  if ((!isA && !isObject(val)) || Object.isFrozen(val) || val instanceof VNode) {
    return
  }
  if (val.__ob__) {
    const depId = val.__ob__.dep.id
    if (seen.has(depId)) {
      return
    }
    seen.add(depId)
  }
  if (isA) {
    i = val.length
    while (i--) _traverse(val[i], seen)
  } else {
    keys = Object.keys(val)
    i = keys.length
    while (i--) _traverse(val[keys[i]], seen)
  }
}

traverse方法

traverse方法是一个递归操作，来完成deep之后，所有子值变化，都会被监听到。

先判断val的类型，如果不是Array，Object或者被冻结，就直接返回
然后拿到val的dep.id ，来判断id，保证不会重复收集以来
如果是数组，就循环数据，将数组中的每一项都递归调用_traverse()
如果是Object类型，就循环Object中所有的key，然后执行一次读取操作，再递归子值：while (i--) _traverse(val[keys[i]], seen)val[keys[i]]会触发getter，触发收集依赖的操作。