Vue的MVVM实现方法

},
set(value) {
bValue = value;
}
})
}
// 私有变量
const obj = {
_data: {
a: null
}
}
Object.defineProperty(obj,'a', {
get() {
return obj._data.a
},
set(value) {
obj._data.a = value
}
})

总结： Vue中进行双向绑定就是通过私有变量data实现的。是不是和Vue的结构很相似。

实现Vue的双向绑定

实现改变元素的值的时候，dom进行相应的更新数据。
dom的值进行更新的时候，元素的值同时也改变。

html部分

<div class="forms">
 <span>姓名</span> <input type='text' name="name">
 <span>年龄</span> <input type='text' name="age">
</div>

js部分

// 改变input的值得同时obj的值改变
const obj = {
 _data: {
  name: null,
  age: null
 }
}
const nameInput = document.querySelector('input[name]')
nameInput.addEventListener('input', (e) => {
  obj._data.name = e.target.value;
})
Object.definePeoperty(obj,'a',{
 get() {
  return obj._data.name
 },
 set(value) {
  nameInput.value = value;
  obj._data.name = value;
 }
})
// 简化
function bind(obj,dom) {
 let name = dom.getAttribute('name');
 Object.defineProperty(obj,name,{
  get() {
   return obj._data[name]  },
  set(value) {
   dom.value = value;
   obj._data[name] = value;
  }
 })
 dom.addEventListener('input', (e) => {
  obj._data[name] = e.target.value;
 })
}
bind(obj,document.querySelector('input[name=name]'))
bind(obj,document.querySelector('input[name=age]'))

缺点： 必须要事先的绑定dom。是不是和Vue里面的很想，必须事先申明data中的数据，如果需要额外的添加数据的时候，必须通过Vue.set()来申明。