Object.defineProperty()

vue.js的双向数据绑定就是通过Object.defineProperty方法实现的，俗称属性拦截器。

Object.defineProperty()

方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。

语法

/*
 * @param: obj:需要定义属性的对象; 
 * @param: prop:需要定义或修改的属性；
 * @param: descriptor:将被定义或修改属性的描述符
*/
Object.defineProperty(obj,prop,descriptor)

复制代码

                    let obj1 = {}
		    Object.defineProperty(obj1,"name",{
		      value: "你我贷"
		    })
		    console.log(obj1);
		    //{name: "你我贷"}复制代码

                    let obj1 = {}
		    Object.defineProperty(obj1,"name", {
			    set: function(value) {
			        console.log('赋值操作, 赋值' + value);
			    },
			    get: function() {
			        console.log('取值操作');
			        return "你我贷";
			    }
		    })
		    obj1.name = "嘉银"
		    console.log(obj1.name);复制代码

数据与视图的联动

<div id="test"></div>复制代码

                    let obj1 = {}
		    Object.defineProperty(obj1,"name", {
			    set: function(value) {
			    	document.getElementById('test').innerHTML = value
			    },
			    get: function() {
			        console.log('取值操作');
			        return document.getElementById('test').innerHTML;
			    }
			})
			obj1.name = "嘉银"复制代码