vue之手动实现数据双向绑定

从学习到使用vue进行开发，已经过去了半年多，vue强大的功能令我叹服，在vue的众多功能中，数据的双向绑定是我喜欢的功能之一，下面带大家来手撕v-model，这也是在笔试或者面试中会遇到的问题。

数据双向绑定的原理

vue中数据的双向绑定的核心是使用了es5的Object.defineProperty()方法来劫持数据的getter和setter函数，以达到读取数据和获取数据的功能（这是旧的写法，新的写法使用了es6中proxy，感兴趣的朋友可自行去了解）。该方法会在一个对象上定义一个新属性或者修改一个对象的现有属性，并返回这个对象。

数据双向绑定的代码实现

<input id="input" type="text" />
<div id="text"></div>

我们要实现的效果是，当用户在input中输入内容时，div中会同时显示输入内容，下面是js代码：

let input = document.getElementById("input");
let text = document.getElementById("text");
let data = { value: "" };

Object.defineProperty(data, "value", {
	set: function(val) {
		text.innerHTML = val;
		input.value = val;
	},
	get: function(val) {
		return val;
	}
});
input.onkeyup = function(e) {
	data.value = e.target.value;
}

我们定义了一个data对象，相当于vue中的data函数，然后使用Object.defineProperty()方法劫持了data的value属性。在setter函数中，我们把value修改后的值赋给输入框和div里的内容，达到同步的效果；在getter函数中，我们直接返回value的值即可。最后的onkeyup方法是把在输入框输入的值赋给data的value属性。