Vue的MVVM实现

1. Object.defineProperty() 定义属性

用意：给一个对象定义属性，那个属性原来是不存在的。这是一个初衷，属性是不存在的，需要额外添加。

1. 使用说明

   Object.defineProperty(obj,props)

   第一个参数是将被添加或者修改的属性的对象

   第二个参数是一个对象，表示将要添加的一个或多个键值对一直要添加属性的具体配置

   {

   ​ '属性名':{value:'...',writable:true},

   ​ '属性名':{value:'...',writable:true}

   }

2. 属性的getter和setter

   • 一般用于局部变量
   • 给构造函数添加属性

   // 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的值 
        }   
    })
   }
   

3. 使用场景

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

细节

今天楼主上午在思考，一般使用Object.defineProperty()为什么需要使用局部变量呢？

所有楼主就下了下面的代码

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

双向绑定.png

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