Vue

Vue响应式原理obserserver、Dep、Watcher

2021-11-09  本文已影响0人  小码农_影

vue2中通过Object.defineproperty(obj,key,handle)将代码中的data的属性进行getter与setter的响应式转化，这样数据的获取与数据的改变就是通过object.defineproperty的get set拦截实现的，这个过程是observer实现的

1、observer的作用：

在state.js的initData（）函数中，使用的是observer()方法来为数据绑定一个observer对象，observer对象执行defineReactive()方法为数据对象设置setter和getter，
function defineReactive(obj,key,val){
    Object.defineProperty(obj,key,{
        enumerable:true,
        configurable:true,
        get:()=>{
            console.log('数据被获取时，触发')
            return val;
        },
        set:(newVal)=>{
            if(val == newVal){
                return 
            }
            val = newVal;
            console.log("数据被改变时，触发");
        }
    })
}
let data = {
    test:'初始值'
}
//对data上的test属性进行绑定
consoel.log(data.test)//数据获取时
data.test = '11'//数据被改变

2、Dep依赖关系

每一个组件都有一个watcher，每一个属性都存在一个watcher，每个属性都给分配一个dep，dep中需要存放这个watcher，watcher中还要放着这个dep

watcher 和dep是双向存储的关系：

我们将更新的功能封装了一个watcher
渲染页面前，会将当前的watcher 放到dep类中
在vue中页面渲染时使用的属性，需要进行依赖收集，收集对象的渲染watcher
取值时，给每个属性都加了dep属性，用于存储这个渲染watcher,(同一个watcher会对应多个dep)
每个属性可能对应多个视图（多个视图肯定是多个watcher） 一个属性要对应多个watcher
dep.depend()=> 通知dep存放watcher => dep.target.addDep()=>通知watcher存放dep

function  defineReactive(obj,key,val){
    var dep = new Dep();
    Object.defineProperty(obj,key,{
        enumerable:true,
        configurable:true,
        get:()=>{
            //数据获取，将依赖收集
           dep.addSub(watcher);
            return val;
        }
        set(newVal)=>{
            if(val == newVal){
                return 
            }
            val = newVal;
            //数据改变，通知收集的依赖去执行更新
            dep.notify();//给订阅者发消息，执行更新操作
        }
    })
}
function Dep(){
    this.subs = [];
}
Dep.prototype = {
    addSub:functin(sub){
        this.subs.push(sub)
    },
    notify:function(){
        this.subs.forEach(item=>{
            item.update()
        })
    }
}

3、Watcher的作用

Watcher就是被收集的依赖，上栗中msg对应了三个watcher的实例依赖，当msg变化，会通知这三个watcher，这三个watcher会执行各自的操作，watcher能够控制自己属于data属性中，还是watch数据监听中的，或者computed中的，因此，Watcher中要有两个方法，一个通知变化，执行更新操作，另一个就是将自身实例添加到Dep的依赖收集中。
let id = 0;
class Watcher {
constructor(vm, exporOrFn, cb, options) {
 this.vm = vm;
 this.exporOrFn = exporOrFn;
 this.options = options;
 this.cb = cb;
 this.id = id++;
 this.deps = [];
 this.depsId = new Set();
 //默认应该让exportOrFn执行，exportOrFn做了什么事？去render上取值
 this.getter = exporOrFn;
 this.get(); //默认初始化要取值
}
get() {
 //稍后用户更新时，可以重新调用getter方法
 //defineProperty.get,每个属性都可以收集自己的watcher,每个属性都有一个依赖收集的对象 dep
 //一个属性可以对应多个watcher，一个watcher也可以对应多个属性
 pushTarget(this);
 this.getter();
 popTarget(this);
}
run(){
 console.log('----run');
 this.get()
}
update(){
   // this.get()
   //当数据被改变，对应的执行渲染等更新操作
   //每次更新时 this 多次调用update 我希望现将watcher缓存下来，等一会一起更新
   queueWatcher(this);
}
addDep(dep) {
//将watcher实例添加到data的属性中
 //可能模板中多次取相同的属性值，但是每个属性值只需要一个watcher就可以，需要需要进行去重操作
 let id = dep.id;
 if (!this.depsId.has(id)) {
   this.depsId.add(id);
   this.deps.push(dep);
   dep.addSub(this);
 }
}
} 

//异步更新原理
let callbacks = [];
let waiting  = false
function flushCallbacks(){
 callbacks.forEach(cb=>cb());
 waiting = false
}
function timer(flushCallbacks) {
let timerFn = () => {};
if (Promise) {
 timerFn = ()=>{Promise.resolve().then(flushCallbacks)};
} else if (MutationObserver) {
 //可以监听dom的变化
 let textNode = document.createTextNode(1);
 let observe = new MutationObserver(flushCallbacks);
 observe.observe(textNode, {
   characterData: true,
 });
 timerFn = () => {
   textNode = 3;
 };
 //微任务
} else if (setImmediate) {
 timerFn = () => {
   setImmediate(flushCallbacks);
 };
} else {
 timerFn = () => {
   setTimeout(flushCallbacks, 0);
 };
}
timerFn();
}

export function nextTick(callback){
 callbacks.push(callback);
 if(!waiting){
     timer(flushCallbacks);//vue2中考虑了兼容性问题，vue3中没有考虑
     waiting = true;
 }
}
总结
上一篇 下一篇

猜你喜欢

热点阅读