vue2响应式的实现

vue2响应式

响应式：

1.数据必须联动（双向绑定），使用发布订阅模式。

2.需要捕获到数据修改（数据劫持），使用Object.defineProperty

实现：

// vue2响应式的实现

// 订阅器模型
let Dep = {
  clientKist: {},//容器
  // 订阅
  listen: function (key, fn) {
    (this.clientKist[key] || (this.clientKist[key] = [])).push(fn);
  },
  // 发布
  trigger: function () {
    let key = Array.prototype.shift.call(arguments),
      fns = this.clientKist[key]
    if (!fns || fns.length === 0) {
      return false
    }

    for (let i = 0, fn; fn = fns[i++];) {
      fn.apply(this, arguments)
    }
  }
}

// 数据劫持
let dataHi = function ({ data, tag, datakey, selector }) {
  let value = '',
    el = document.querySelector(selector);
  Object.defineProperty(data, datakey, {
    // 取值
    get: function () {
      console.log('取值')
      return value
    },
    // 设置值
    set: function (val) {
      console.log('设置值')
      value = val
      Dep.trigger(tag, val)
    }
  })
  Dep.listen(tag, function (text) {
    el.innerHTML = text
  })
}

使用：

<div>
视图一：<span class='box-1'></span>
</div>

let obj = {}
dataHi({
  data: obj,
  tag: 'view-1',
  datakey: 'one',
  selector:'.box-1'
})
obj.one='初始化视图一'