【Vue原理】依赖收集 - 源码版之基本数据类型

本文深入探讨Vue 2.5.17的依赖收集机制,作为响应式更新的第一步。通过数据初始化和依赖收集流程,阐述如何处理基本数据类型并确保数据变化时能通知到相关依赖。文中通过实例和源码解读,解释了`Dep.target`、`Dep`构造函数以及`dep.addSub`在依赖收集过程中的作用。
摘要由CSDN通过智能技术生成

写文章不容易,点个赞呗兄弟
专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧
研究基于 Vue版本 【2.5.17】

如果你觉得排版难看,请点击 下面链接 或者 拉到 下面关注公众号也可以吧

【Vue原理】依赖收集 - 源码版之基本数据类型

如果对依赖收集完全没有概念的同学,可以先看我这篇

【Vue原理】响应式原理 - 白话版

依赖收集,主要是为了解决一个问题,什么问题呢?

首先,我们都知道,Vue 的数据是响应式更新的,一旦数据改变了,那么相应使用到 数据的地方也会跟着改变。

那么问题来了,数据改变的时候,Vue 怎么知道,去让那些使用到数据的地方也改变呢?

这就是依赖收集要解决的问题!

他是怎么解决的?简单说就是把依赖了数据的地方,给集中收集起来以便变化后通知!我们今天来看源码的流程

首先,响应式更新,分为两步,依赖收集和依赖更新

今天讲的是依赖收集,如何去收集 使用了数据的地方

依赖收集,又分为两个流程

1、数据初始化流程

2、依赖收集流程

当前篇,先以基本数据类型为例讲解,因为 基本数据和 引用数据 在处理上有很大的不同,引用类型需要理解的东西更多更复杂,所以需要循序渐进,分两篇描述


数据初始化流程

首先,在实例初始化的时候,需要对数据进行响应式处理,也就是给每个属性都使用 Object.defineProperty 处理

处理的流程是怎么样的呢?

1、实例初始化中,调用 initState 处理部分选项数据,initData 用于处理选项 data

Vue.prototype._init=function(){
    ...
    initState(this)
    ...

}

function initState(vm) {    

    var opts = vm.$options;

    ... props,computed,watch 等选项处理

    if (opts.data) {
        initData(vm);
    }
};

2、initData 遍历 data,definedReactive 处理每个属性

function initData(vm) {  

    var data = vm.$options.data;

    data = typeof data === 'function' ? 
           data.call(vm, vm) : data || {};

    // ... 遍历 data 数据对象的key,重名检测,合规检测等代码
    new Observer(data);
}

function Observer(value) {    

    var keys = Object.keys(value);

    // ...被省略的代码
    for (var i = 0; i < keys.length; i++) {
        defineReactive(obj, keys[i]);
    }
};

3、definedReactive 给对象的属性 通过 Object.defineProperty 设置响应式

function defineReactive(obj, key) {    

    // dep 用于中收集所有 依赖我的 东西
    var dep = new Dep();    
    var val  = obj[key]    

    Object.defineProperty(obj, key, {        
        enumerable: true,        
        configurable: true,

        get() { ...依赖收集,详细源码下个流程放出 },
        set() { ....依赖更新,源码下篇文章放出 }
    });
}


依赖收集流程

写一个小例子来解析

new Vue({    
    el: document.getElementsByTagName("div")[0],
    data(){        
        return  {            
            name:11
        }
    }
})

页面模板

页面引用了数据 name,name 需要保存 页面的watcher,以便于 name 变化时,通知 页面watcher 更新

1、页面渲染函数

with(this){  
    return _c('div',{},[name])
}

2、读取 name

渲染函数执行,上下文对象绑定为 实例,于是name读取到实例上的 name

3、保存 watcher

name 被读取,自然走到 Object.defineProperty.get 方法上,从这里开始收集 watcher

先来观察下 defineReactive 中省略的 get 的源码

function defineReactive(obj, key) {    

    var dep = new Dep();    
    var val  = obj[key]    

    Object.defineProperty(obj, key, {

        get() {            
            if (Dep.target) {                
                // 收集依赖
                dep.addSub(Dep.target)
            }            
            return val
        }
    });
}

哈哈哈,这里就有意思了,这段代码就是 依赖收集的核心,主要是三个点

Dep.target
Dep
dep.addSub

1、Dep.target

Dep.target 指向的是各种 watcher,watch的watcher,页面的watcher 等等

Dep.target 是变化的,根据当前解析流程,不停地指向不同的 watcher (指向,其实就是直接赋值 ,如下)

Dep.target = 具体watcher

“当然没有这么简单,就是表示一个意思而已”

简单想,指向哪个watcher,那么就是那个 watcher 正在使用数据,数据就要收集这个watcher

你可以先不用管 Dep.target 到底是怎么指向,你只用记住 在 watcher

比如当前页面开始渲染时,Dep.target 会提前指向当前页面的 watcher。

于是页面渲染函数执行,并引用了数据 name 后,name 直接收集 Dep.target,就会收集到当前页面的 watcher

watcher 有负责实例更新的功能,所以会被收集起来,数据变化时通知 watcher,就可以调用 watcher 去更新了

watcher 在 依赖收集中只起到被收集的作用,所以不会在这里详细解释

2、Dep

Dep 是一个构造函数,用于创建实例,并带有很多方法

实例会包含一个属性 subs 数组,用于存储不同数据 【收集的依赖】

看下dep的构造函数

var Dep = function Dep() {    

    // 保存watcher 的数组
    this.subs = [];
};

3、dep.addSub

原型上的方法,作用是往 dep.subs 存储器中 中直接添加 watcher

Dep.prototype.addSub = function(sub) {    
    this.subs.push(sub);
};

所以,【dep.addSub(Dep.target) 】就会直接添加当前 watcher

于是,收集流程大概是这样

1、页面的渲染函数执行, name 被读取

2、触发 name的 Object.defineProperty.get 方法

3、于是,页面的 watcher 就会被收集到 name 专属的闭包dep 的 subs 中


总结

为什么需要依赖收集,之前也已经说过,是为了变化时通知 那些使用过数据的地方

就好比,你去商店买东西,东西还没有发售,于是你把你的电话给老板,老板把你的记在电话本上。当东西发售时,就会打你的电话通知你,让你来领取(完成更新)。

其中涉及的几个步骤,按上面的例子来转化一下

1、你买东西,就是你要使用数据 name

2、你把电话给老板,电话就是你的 watcher,用于通知

3、老板记下电话在电话本,就是把 watcher 保存在 subs 中。

4、剩下的步骤属于依赖更新

公众号

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值