Vue2.0双向绑定的底层原理:Object.defineProperty()

语法： Object.defineProperty(对象,属性名,配置选项)

 配置选项 
 {
    value:          
    writable:         boolean   是否可以重写               默认是false   
    enumerable:       boolean   是否可枚举(遍历)           默认是false
    configurable:     boolean   是否可删除或重新修改配置项   默认是false
    set:function(){}    //当属性被赋值时,执行这个函数
    get:function(){}    //当属性被读取时,执行这个函数
 }

案例一：

var obj = {
    id:1,
    name:"jack",
    gender:"male"
}
Object.defineProperty(obj,'age',{
    value: 20,
    writable:true,
    enumerable:true,
    configurable:true
})
console.log(obj);
// obj.age = obj.age -2
// console.log(obj.age);
for( var k in obj){
    console.log(k,obj[k]);
}

delete obj.age
console.log(obj);

 

案例2:

<input type="text">
    <div></div>

      

        var obj={}

        var temp=''
        
        var div = document.querySelector('div')
        Object.defineProperty(obj,'name',{
            set:function(data){        //当属性被赋值时,执行这个函数
                //console.log(123);
                temp=data
                div.innerHTML=data
            },
            get:function(){            //当属性被读取时,执行这个函数
                //console.log(123);
                return temp
            }
        })

        document.querySelector('input').addEventListener('input',function(e){

            // console.log(e.target.value);

            obj.name=e.target.value
        })