vue双向绑定原理

前言

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。数据和 DOM 被建立了关联，所有东西都是响应式的
组件系统是 Vue 的另一个重要概念，在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例

访问器属性

VUE实现双向数据绑定的原理就是利用了

Object.defineProperty(object, propertyName, attributesObject) 

Object.defineProperty方法接受三个参数，依次如下。
object： 属性所在的对象
propertyName： 字符串，表示属性名
attributesObject： 属性描述对象

这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

代码演示：defineProperty的用法

var obj = {};
var name;
//第一个参数：定义属性的对象。
//第二个参数：要定义或修改的属性的名称。
//第三个参数：将被定义或修改的属性描述符。
Object.defineProperty(obj, "data", {
	//获取值
	get: function () {
	  return name;
	},
	//设置值
	set: function (val) {
	  name = val;
	  console.log(val)
	  }
})
//赋值调用set
obj.data = 'aaa';
//取值调用get
console.log(obj.data);

代码演示：defineProperty的双向绑定

var obj={};
Object.defineProperty(obj, 'val',{
	set:function (newVal) {
	document.getElementById("a").value = newVal==undefined ?'':newVal;
	document.getElementById("b").innerHTML=newVal==undefined?'':newVal;
	}
});
document.getElementById("a").addEventListener("keyup",function (e) {
	obj.val = e.target.value;
})