Vue2.X是如何利用Object.defineProperty()实现数据绑定的

原创

伯约同学

发布于 2022-02-15 13:46:18

48900

代码可运行

文章被收录于专栏：javascript学习笔记javascript学习笔记

运行总次数：0

代码可运行

Vue2.X是如何利用Object.defineProperty()实现数据绑定的

上一篇文章写到了Object.defineProperty的使用，这篇文章说一下Vue是如何利用这个方法实现数据绑定的。

首先把Vue中的核心方法defineReactive做一些简化

function defineReactive (obj, key, val, cb) {
    var dep = new Dep();

    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: ()=>{
            /*....依赖收集等....*/  
            dep.depend()
            return val
        },
        set:newVal=> {
            val = newVal;
            /*触发回调*/
            dep.notify()
        }
    })
}

Vue通过defineReactive方法实现对需要观察的对象的每个属性进行监控。

dep对象就相当于一个调度中心的作用，如果有数据用到这个属性，它就会自动收集该属性到调度中心，如果某属性发生了改变，那就会通知调度中心来更新视图。

再看看dep方法和它的功能。相对比较简单：1、存储订阅者2、添加订阅者

function Dep () {
  // 所有的watcher 放进这里统一管理
  this.subs = []
}
Dep.target = null;
// 通知视图更新dom的 notify的方法
Dep.prototype.notify  = function () {
  // this.subs 存储 watcher
  this.subs.forEach(sub => {
    // sub 是某个Watcher 具体调用某个Watcher的update 方法
    sub.update()
  })
}
// 添加订阅者的方法
Dep.prototype.addSub = function (sub) {
  this.subs.push(sub)
}

订阅器主要也是了两个方法；1、触发一下属性的获取，顺便把自己加到调度中心去 2、update更新视图

// 具体的订阅器Watcher
// 传入一个vue 的示例， 监听的属性， 以及处理的回调函数
function Watcher (vm,prop,callback) {
  this.vm = vm;
  this.$prop = prop;
  this.value = this.get();
  this.callback = callback;
 }
// 添加watcher 获得属性的get 方法，当有属性访问/设置 的时候，就产生订阅者 将这个订阅者放进调度中心
Watcher.prototype.get = function () {
  Dep.target = this;
  // 获得属性值
  const value = this.vm.$data[this.$prop];
  return value
}
// 添加watcher的更新视图的方法
Watcher.prototype.update = function () {
  // 当属性值有变化的时候，执行方法，更新试图
  const value = this.vm.$data[this.$prop];
  this.callback(this.value)
}