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方法中我们又返回了一个"被读取的属性",因此,在页面中我们看到的是下面这样
vue源码部分解析--双向数据绑定(vue2--Object.defineProperty)--基础解析篇_第1张图片
而当我们在输入框进行输入时,我们触发了输入框所绑定的按键抬起事件,在按键抬起事件中我们对obj.name进行了修改,这就触发了Object.defineProperty()的set方法。
其实就是咱们平时用v-model时候的感觉,就是监听一个数据是否变化,变化了之后就更新数据。

你可能感兴趣的:(vue,javascript,vue.js,html5)