vue.js源码- 剖析observer,dep,watch如何具体的实现数据双向绑定

2,131 阅读3分钟

Vue双向数据绑定的核心和基础api是Object.defineProperty,其内部真正参与数据双向绑定流程的主要有Obderver、Dep和Watcher,基于defineProperty和发布者订阅者模式,最终实现数据的双向绑定。那么Obderver、Dep和Watcher是如何具体配合工作的呢?下面就来理一理。

看此文章之前你需要对vue的双向数据绑定有一定的理解。若不了解可移步:vue.js源码解读系列 - 双向绑定具体如何初始化和工作

看到这里就当你对双向数据绑定已经有一定的理解:

提示:要看懂此篇文章你需要对vue的mvvm有一定的了解,并需要和专注的去理解,或者对照源码跟着走,不然就很难真的看懂。

在这里把双向数据绑定分为两个流程:

1、收集依赖流程:

observe -> 
walk -> 
defineReactive -> 
get -> 
dep.depend() -> 
watcher.addDep(new Dep()) -> 
watcher.newDeps.push(dep) -> 
dep.addSub(new Watcher()) -> 
dep.subs.push(watcher)

依赖收集会经过以上流程,最终watcher.newDeps数组中存放dep列表,dep.subs数组中存放watcher列表。


为什么要进行依赖收集?

new Vue({
    data(){
        return {
             name:'zane',
             sex:'男'
        }
    }
})

有上面这个data,实际上页面只使用到了name,并没有使用age,根据Object.defineProperty的转换,如果我们设置了this.sex='女',那么Vue也会去执行一遍虚拟DOM的比较,这样就无形的浪费了一些性能,因此才需要做依赖收集,界面用到了就收集,没有用到就不收集。

我们跟着流程走来理一遍源码:

直接进入Object.defineProperty的get方法:


考验你闭包能力的时候到了,这个dep对象就是一个闭包。记下来我们看看dep.depend()方法的实现。


先暂停一下,上面两处都用到了 Dep.target ,我也说了它就是一个Watcher实例化对象,你是不是很想搞懂它到底在哪里赋值的呢,不急请跟着我下面的代码看看。




搞懂了Dep.target等于一个Watche对象,现在继续回到之前的思路看watcher.addDep做了什么。



就这样依赖收集的流程就走完了,是否感觉很绕。

总结:依赖收集最终在 watcher.newDeps 中push了闭包中传过来的dep对象,在dep.subs中push了初始化Vue是简历的Watcher对象,这个对象的,this.getter = expOrFn,传过来的expOrFn是后期数据更新页面渲染的核心步骤,需要沉下心来好好去理理。


2、视图更新流程:

set -> 
dep.notify() -> 
subs[i].update() -> 
watcher.run() || queueWatcher(this) -> 
watcher.get() || watcher.cb -> 
watcher.getter() -> 
vm._update() -> 
vm.__patch__()

视图更新会经过以上流程,最终调用Vue的虚拟Dom diff过程实时更新界面视图







走到此处后面我就不去跟踪了,后面会调用vm.__patch__ 方法,进而执行虚拟DOM的diff过程实时的更新界面。


总结:

要很好的理解vue的数据双向绑定就要比较耐心,沉下心来慢慢理解,同时也需要对vue的源码有个大致的理解,不然你只会看的越来越烦躁越来越没有信心。

vue很好的利用了Object.defineProperty方法的 get和set方法,订阅者发布者的设计思路,巧妙的组织代码,值得我们很深入的去学习和理解,从而促使我们更好的去使用它。谢谢尤大的无私奉献,让我们提高了生产力,把更多的精力花到业务逻辑中去。

原文地址:github.com/wangweiange…