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 = "嘉銀"複製代碼