Vue-指令的基本原理（可能）

Object.defineProperty()

• 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
• 备注：应当直接在 Object 构造器对象上调用此方法，而不是在任意一个 Object 类型的实例上调用。

const object1 = {};
Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false
});

object1.property1 = 77;
// throws an error in strict mode 严格模式下错误

console.log(object1.property1);
// expected output: 42

语法

Object.defineProperty(obj, prop, descriptor)

• 参数：

• obj 要定义的属性的对象

• prop 要定义或者修改的属性名称或者Symbol

• descriptor 要定义或者修改的属性描述符

• 返回值

• 被传递给函数的对象。

• Get: 指读取属性时调用的函数

• Set: 指写入属性时调用的函数

<h1 v-text="num"></h1>
<p v-text="num"></p>
<input v-model="num"/>

var obj = {_num : 0};
Object.defineProperty(obj,"num",{
	get() {
		console.log("get执行");
		return obj._num;
	},
	set(v) {
		console.log("set执行");
		obj._num = v;
		// vue中v-text指令的原理
		var elems = document.querySelectorAll("*[v-text='num']");
		for(var i = 0; i < elems.length; i++) {
			elems[i].innerHTML = v;
		}
		// vue中v-model指令的原理,双向绑定
		var els = document.querySelectorAll("*[v-model='num']");
		// 获取所有属性为v-model的值为num的表单
		for(var i = 0; i < els.length; i++) {
			els[i].value = v;
			// 当设置num时候,设置表的值也为 v;
			els[i].oninput = function(e) {
				// 当表单发生改变时候
				obj.num = e.currentTarget.value;
				// e.currentTarget 当前事件对应的对象
				// 设置num的值为当前事件对象的值
			}
		}
	}
})
// 定义objde num属性,当num值被设置时,执行set方法,被获取时执行get方法
obj.num		// (get执行 0)	获取执行get方法
obj.num	= 20	// (set执行 20)	设置执行set方法