[JavaScript知识库]vue源码部分解析--双向数据绑定（vue2--Object.defineProperty）--基础解析篇

vue2的数据绑定(即v-model这些)是通过Object.defineProperty()的方式来实现的，听起来有点麻烦，那先看简单的示例再看后面的解析。

原生js的双向绑定示例

		<input type="text" name="" id="input" value="" />
		<div id="app"></div>
		<script type="text/javascript">
			var $=name=>document.getElementById(name);
			$("input").onkeyup=e=>{
				console.log(e.target.value);
				let a=e.target.value;
				$("app").innerHTML=a;
			}
		</script>

解析：先定义一个选择器函数，再给输入框input对象绑定按键抬起事件，通过e.target.value获取到输入框中的值，再将这个值赋值给id为app的div，从而实现修改输入框的值顺带更新app的值。

Object.defineProperty(obj, prop, descriptor)

参数
obj
要定义属性的对象。
prop
要定义或修改的属性的名称或 Symbol 。
descriptor
要定义或修改的属性描述符。
返回值
被传递给函数的对象。

在ES6中，由于 Symbol类型的特殊性，用Symbol类型的值来做对象的key与常规的定义或修改不同，而Object.defineProperty 是定义key为Symbol的属性的方法之一

vue2的Object.defineProperty()示例

<input type="text" name="" id="input" value="" />
		<div id="app"></div>
		<script type="text/javascript">
			var $=name=>document.getElementById(name);
			var obj={};
			var name="jack";
			Object.defineProperty(obj,"name",{
				get:function(){
					console.log("读取属性")
					return "被读取的属性";
				},
				set:function(v){
					console.log("写入属性");
					name=v;
					$("app").innerHTML=v
				}
			})
			
			$("input").onkeyup=e=>{
				console.log(e.target.value);
				let a=e.target.value;
				obj.name=a;
			}
			$("app").innerHTML=obj.name;
		</script>

在上面的代码中，我们给obj套上了一个Object.defineProperty()方法，监听的对象就是obj的name属性，在我们获取obj.name属性的时候，我们就会触发Object.defineProperty()中的get方法
在示例的代码中，我们在给app元素填入内容时就获取了obj.name的值，也就是说我们这会就触发了Object.defineProperty()中的get方法，而在get方法中我们又返回了一个"被读取的属性"，因此，在页面中我们看到的是下面这样

而当我们在输入框进行输入时，我们触发了输入框所绑定的按键抬起事件，在按键抬起事件中我们对obj.name进行了修改，这就触发了Object.defineProperty()的set方法。
其实就是咱们平时用v-model时候的感觉，就是监听一个数据是否变化，变化了之后就更新数据。