js 了解Object.defineproperty并实现简易版vue的双向绑定

Object.defineproperty用于对对象添加或修改一个已有的属性（如果他是configurable）并对特性进行设置
举个栗子（该栗子仅仅是列举出Object.defineProperty所有属性）：

var obj = {}
var demo = null;
Object.defineProperty(obj,"a",{
	value: 2, //值
	writable: true, //写入
	configurable: true, //配置
	enumerable:true, //枚举 是否可以循环
	get: function(){ //获取时方法
		return demo
	},
	set: function(value){ //赋值时方法
		demo = value
	}
})

具体参数的含义以及使用方法直接看看这个吧
MDN Object.defineProperty

这里使用该方法实现一个简易的vue双向绑定，实现原理是使用set进行数据的监听

代码如下:

	<input id="inputs" type="text" >
	<span id="sp"></span>
    <script>
		var inputs = document.getElementById("inputs"),
			span = document.getElementById("sp"),
			obj = {};
		Object.defineProperty(obj,"msg",{
			set: function(value){
				inputs.value = value
				span.innerHTML = value
			}
		})
		inputs.addEventListener('keyup',function(event){
			obj.msg = event.target.value
		})
    </script>

效果如下，输入框输入的时候，对应span的内容也会跟着变化