实现一个双向数据绑定

实现数据双向绑定

vue2.0 中使用对象的属性描述符中的get与set方法来实现，当数据发生改变时可以触发相应事件。

下面是我自己手动实现一个数据的双向绑定，效果如下图

demo.gif

定义基础的变量

// 定义
let x; // 我们用x来存储需要改变的值
let el = document.getElementById('x-input') // 输入框
let el2 = document.getElementById('x-value')  // 显示
let active; // 用来暂存当x改变时触发的函数

事件注册对象与依赖收集

let onXChange = cb => {
  active = cb
  active()
  active = null
}
// 依赖收集
function Dep() {
  this.deps = new Set() // 收集依赖
}
// 收集active
Dep.prototype.depend = function () {
  if (active) this.deps.add(active)
}
// 触发依赖的方法
Dep.prototype.notify = function(val) {
  this.deps.forEach(dep => dep(val))
}

代理函数

// 属性代理
let ref = function (initVal) {
  let val = initVal;
  let dep = new Dep();
  return Object.defineProperty({}, 'value', {
    get() {
      dep.depend() // 触发get时将active放入依赖中
      return val
    },
    set(newVal) {
      val = newVal // 触发set时将值赋值给val
      dep.notify(newVal) // 触发事件函数
    }
  })
}

调用

x = ref(el.value) // 创建依赖对象，当x.value改变是会触发onXChange注册的方法
onXChange(function(val) {
  el2.innerText = x.value
})

el.oninput = function(e) {
  x.value = e.target.value
}

下面是html