模拟vue数据劫持实现发布订阅核心代码

// 定义一个依赖收集器
class Dep {
  constructor() {
    this.subs = [] // 订阅者列表
  }
  // 添加订阅者
  addSub(sub) {
    this.subs.push(sub)
  }
  // 通知所有订阅者数据已更新
  notify() {
    this.subs.forEach(sub => sub.update())
  }
}

// 定义一个观察者
class Watcher {
  constructor(vm, exp, cb) {
    this.vm = vm
    this.exp = exp
    this.cb = cb
    this.value = this.get() // 初始化值
  }
  // 获取当前值
  get() {
    Dep.target = this // 将当前订阅者指向该自身
    let value = this.vm[this.exp] // 获取当前值，并触发依赖收集
    Dep.target = null // 收集完毕后，将订阅者置空
    return value
  }
  // 当被依赖的数据更新时，触发更新回调
  update() {
    let value = this.vm[this.exp]
    if (value !== this.value) {
      this.cb.call(this.vm, value, this.value)
      this.value = value
    }
  }
}

// 数据劫持函数
function observe(obj, vm) {
  if (!obj || typeof obj !== 'object') {
    return
  }
  Object.keys(obj).forEach(key => {
    defineReactive(vm, key, obj[key])
  })
}

// 定义一个数据劫持函数
function defineReactive(vm, key, val) {
  let dep = new Dep() // 定义依赖收集器

  Object.defineProperty(vm, key, {
    get() {
      if (Dep.target) {
        dep.addSub(Dep.target) // 添加订阅者
      }
      return val
    },
    set(newVal) {
      if (newVal === val) {
        return
      }
      val = newVal
      dep.notify() // 数据更新，通知所有订阅者
    }
  })
}

以上代码中，Dep类是依赖收集器，Watcher类是观察者，defineReactive函数是数据劫持函数。在数据劫持过程中，会监听对象的属性的变化，一旦有变化会触发数据改变的通知，通知所有已经订阅当前值的订阅者进行数据更新。同时，也提供了添加订阅者和通知订阅者更新的接口。

以上就是模拟vue数据劫持实现发布订阅核心代码全部内容,感谢大家支持自学php网。