vue 双向绑定中观察者模式

在数据劫持之外最重要的部分就是Dep和Watcher,这其实是一个观察者模式。
用最简单的代码实现以下Vue的观察者模式:
	通过watcher.evaluate()将自身实例赋值给Dep.target
	调用dep.depend()将dep实例将watcher实例push到dep.subs中
	通过数据劫持,在调用被劫持的对象的set方法时,调用dep.subs中所有的watcher.update()
// 观察者
class Dep {
    constructor() {
        this.subs = []
    }
    
    addSub(sub) {
        this.subs.push(sub)
    }
    
    depend() {
        if (Dep.target) { 
            Dep.target.addDep(this);	//添加每次实例化watcher后绑定到Dep.target上的watcher实例
        }
    }
    
    notify() {
        this.subs.forEach(sub => sub.update())
    }
}

// 被观察者
class Watcher {
    constructor(vm, expOrFn) {
        this.vm = vm;
        this.getter = expOrFn;
        this.value;
    }

    get() {
        Dep.target = this;		
        
        var vm = this.vm;
        var value = this.getter.call(vm, vm);
        return value;
    }

    evaluate() {
        this.value = this.get();
    }

    addDep(dep) {
        dep.addSub(this);
    }
    
    update() {
        console.log('更新, value:', this.value)
    }
}

// 观察者实例
var dep = new Dep();

//  被观察者实例
var watcher = new Watcher({x: 1}, (val) => val);
watcher.evaluate();

// 观察者监听被观察对象
dep.depend()

dep.notify()
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值