Vue的MVVM实现方法

// get和set的方法不能和value以及writable一起使用
var o ={},
Object.defineProperty(o,'p',{
 get(){
   console.log('调用属性后输出')
 },
   set(val){
   console.log(val+'赋值属性的时候调用')
   }
})
o.p // '调用属性后输出'
o.p = 'hcc' //hcc赋值属性的时候调用
// 可以根据Object.getOwnPropertyDescriptor(对象, '属性名')得到相应的属性配置

// 需求
//给一个对象的属性值不能超过30，超过30的按照30来算
var hcc = {} //全局对象
{
 var age = null //局部变量
 Object.defineProperty(hcc,'age',{
   get(){
     return age //设置hcc.age的值
   },
   set(val){
     age= val> 30?30:val //当赋值给hcc.age的值进行判定从而改变局部变量age的值 
   }  
 })
}

  // 简单的给元素添加属性
  var obj = {name:'hcc'}
  Object.defineProperties(obj,{
   'name':{value:'haaaaa',writable:true},
   'age':{value:24,writable:false}
  })

var obj = {}
Object.defineProperty(obj,'a',{
 get() {
  return 'gg';
 },
 set(value) {
  obj.a = value;
 }
})

// 局部变量，以一个变量为躯壳，设置返回值。
const obj = {}
{
 let bValue;
 Object.defineProperty(obj,'a',{
  get(){
   return bValue
  },
  set(value) {
   bValue = value;
  }
})
}
// 私有变量
const obj = {
 _data: {
  a: null
 }
}
Object.defineProperty(obj,'a', {
 get() {
  return obj._data.a
 },
 set(value) {
  obj._data.a = value
 }
})

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

// 改变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]'))