.验证收集过的依赖的wasTracked函数,验证新收集的依赖的newTracked函数,至于这两个函数是如何验证的,前面说到过trackOpBit依靠effectTrackDepth产生 计算方式:先通过trackOpBit = 1 ++effectTrackDepth,如第一层依赖,...

Dep的作用及实现原理

Dep的用处在于当某一个属性被依赖 了,将 依赖 自己的粉丝--也就是Watcher,收集 起来,假如自己发生了变化,Neng够及时通知粉丝们。

在计算属性被查kan时,将callback赋值给Dep.target,接下来就会调用其所 依赖 属性的getter,我们只要在getter里把callback给 收集 起来就行了。

说实话,这个问题问得有点笼统，咱就是说百度不收录网站可Neng有多种原因哈，比如网站内容质量、结构设计、外部链接等等，你得好好检查检查，害。

依赖 收集则是这一机制的关键部分,用于跟踪数据与视图之间的 依赖 关系。这个过程的时间复杂度通常为 $O$，其中 $n$ 是对象属性的数量，但在实际应用中 优化 良好。

响应式数据与依赖收集机制

依赖 收集机制是Vue响应式系统的核心，了解其工作原理对于构建高性NengVue应用至关重要。

.在 Vue3. 的版本里面还通过位运算优化动态依赖收集的性Neng，那么具体是怎么Zuo的呢？ 我们来kankan原来为什么会存在性Neng问题，我们回顾一下第5篇文章讲解 Vue3 响应式原理的时候，在收集依赖的时候有以下一段代码。

. 是只要存在 activeEffect 变量，我们就会往 deps 中添加依赖，Ru果存在重复的依赖，会利用 Set 数据的特性来去重。目前这种依赖管理方式在高频geng新或深层递归场景下存在性Neng瓶颈。具体表现为副作用函数的依赖可Neng随条件分支动态变化。例如：

const state = reactive effect  => { if  { //  依赖 state.a    console . log ; } else { //  依赖 state.b    console . log ; } }); state . flag = false state . a = '小前端' 

.我们运行上述例子，结果如下：

.掘金签约作者CobyteCobyte   

.对此 Vue3. 创新性地引入 位运算 优化依赖收集，解决了动态依赖切换导致的冗余依赖问题，从而大幅提升了响应式系统的性Neng。本文将从设计背景、实现原理、性Neng优势等方面展开分析，揭示位运算在这一场景下的核心价值。

.那么怎么实现自动清理过期的依赖呢？原来的数据结构如下： .你懂的，我们需要设计一种机制，Neng够智Neng地清理那些不再被使用的依赖。

wasSet = new Set ; // 初始化为上一轮的依newSet = new Set ;   

if ) {     newSet . add ;     if ) {       deps . push ; // 新增依}   }   

for  {     if ) {       deps . splice , 1 ); // 移除失效依}   } wasSet = newSet ; // geng新历史状态   

.通过  Set 而非创建全新数据结构，复用 Set 的高效存储，仅添加 wasTracked 和 newTracked 两个整数字段，就创建一个兼具 依存储 和 追踪状态标记 的复合数据结构了。哈哈，这样是不是hen巧妙？

window.state = reactive
effect => {
    effect => {
        console.log
    })
  console.log
})

// 用于管理嵌套 effect 的调用栈
const effectStack = 
class ReactiveEffect {
    // 存储所有包含本 effect 的依集合
    // 用于实现 stop 功Neng时快速清理依
    deps = 
    constructor {
        // 包裹的副作用函数
        this._fn = fn
    }
    // 执行副作用函数，并触发依收集
    run  {
        try {
            activeEffect = this;
            effectStack.push;
            return this._fn; 
        } finally {
            effectStack.pop; 
            activeEffect = effectStack.length> 0 ? effectStack : undefined;
        }
    }
}

// 用于管理嵌套 effect 的调用栈
const effectStack = 
+ // 当前副作用执行的递归深度
+ let effectTrackDepth = 0
class ReactiveEffect {
+    initDepMarkers {
+        const { deps } = this
+        if  {
+            for  {
+                deps.wasTracked = deps.wasTracked | 
            }
+        }
+    }
}