vue 双向数据绑定功能实现

本文将仿写一个 vue 双向数据绑定的实例。

原理 vue 的双向数据绑定原理，主要是通过Object对象的 defineProperty属性，重写data 的set和get函数实现。本文将简要实现v-model, v-bind, v-click三个命令。原理如图：
实现页面结构如下：

<div id="app">
  	<form>
  		<input type="text" v-model="number">
  		<button type="button" v-click="increment">增加</button>
  	</form>
  	<h3 v-bind="number"></h3>
</div>

包含：

一个input，使用v-model指令
一个button，使用v-click指令
一个h3，使用v-bind指令。

我们最后会通过类似于vue的方式来使用我们的双向数据绑定，结合页面及数据结构注释如下：

	function Vue(options) {
		this._init(options);
	}

        // 初始化构造函数，给它添加一个_init属性
	Vue.prototype._init = function (options) {
		this.$options = options;  // options为Vue实例使用时传入的参数，包括el,data,methods,props,computed,beforeCreate……等
		this.$el = document.querySelector(options.el); // el是#app的元素
		this.$data = options.data;  // this.$data = {number: 0}
		this.$methods = options.methods;  // this.$methods = {increment: function(){}}

		this._binding = {};  // _binding用以保存model与view的映射关系，即下边定义的Watcher的实例。当model改变时，我们会触发其中的指令类更新，保证view也能实时更新
		this._observe(this.$data); //数据监听
		this._complie(this.$el);  //编译更新视图
	}

        // _obverse函数，对data进行处理，重写data的set和get函数
	Vue.prototype._observe = function (obj) {  // obj = {number: 0}
		var value;
		for (key in obj) {
			if (obj.hasOwnProperty(key)) {
				this._binding[key] = {  // 如前数据则：_binding = {number: {_directives:[]} }
					_directives: []
				};
				value = obj[key];
				if (typeof value === "object") {  //如果值还是对象，则递归遍历
					this._observe(value);
				}

				var binding = this._binding[key];
				Object.defineProperty(this.$data, key, {  // 重点
					enumerable: true,
					configurable: true,
					get: function () {
						console.log(`获取${value}`);
						return value;
					},
					set: function (newVal) {
						console.log(`更新${newVal}`);
						if (value !== newVal) {
							value = newVal;
							binding._directives.forEach(function (item) {  // 当number改变时，触发_binding[number]._directives 中绑定的Watcher类的更新
								item.update();
							});
						}
					}
				})
			}
		}
	}

        // _compile函数，用来解析指令(v-bind,  v-model, v-click)等，并在该过程中对view与model进行绑定        Vue.prototype._complie = function (root) { // root即#app，根元素
		var _this = this;
		var nodes = root.children;
		for (var i = 0; i < nodes.length; i++) {
			var node = nodes[i];
			if (node.children.length) {
				this._complie(node);
			}

			if (node.hasAttribute('v-click')) {
				node.onclick = (function () {
					var attrVal = nodes[i].getAttribute('v-click');
					return _this.$methods[attrVal].bind(_this.$data);  //此处 bind使methods的作用域与data作用域一致
				})();
			}

			if (node.hasAttribute('v-model') && (node.tagName == 'INPUT' || node.tagName == 'TEXTAREA')) {
				node.addEventListener('input', (function(key) {
					var attrVal = node.getAttribute('v-model');
					_this._binding[attrVal]._directives.push(new Watcher('input', node, _this, attrVal, 'value'));

					return function () {
						_this.$data[attrVal] = nodes[key].value;  // 使data保持与当前节点的值value一致
					}
				})(i));				
			}

			if (node.hasAttribute('v-bind')) {
				var attrVal = node.getAttribute('v-bind');
				_this._binding[attrVal]._directives.push(new Watcher('text', node, _this, attrVal, 'innerHTML'))
			}
		}
	}

// 指令类Watcher，用来绑定更新函数，实现对DOM元素的更新：
function Watcher(name, el, vm, exp, attr) {
	this.name = name;  //指令名称，例如文本节点，该值设为"text"
	this.el = el;   //指令对应的DOM元素
	this.vm = vm;   //指令所属Vue实例
	this.exp = exp;   //指令对应的值，如"number"
	this.attr = attr;   //绑定的属性值，如"innerHTML"
	
        this.update();
}

        Watcher.prototype.update = function () {
		this.el[this.attr] = this.vm.$data[this.exp];  // 当this.exp即number属性改变时，触发update函数，确保其DOM内容更新
	}

	window.onload = function() {
		var app = new Vue({
			el: '#app',
			data: {
				number: 0
			},
			methods: {
				increment: function () {
					this.number ++;
				}
			}
		});
	}

well done, 灌水结束！

有感兴趣的文章可以扫描微信二维码：

vue 双向数据绑定功能实现

猜你喜欢