Vueの双方向のデータバインディング原理と2を達成

まず、データ機関

私たちのコードは、データのアクセスにカプセル化されているmyVue.data.name、あなたがデータを取得したい場合は、確かに追加する必要はありません実際のVueの中で、dataすなわちオプションをmyVue.name、myVue.skill。
この時点で、エージェントが同期するようにデータを変更し、データオプションのVueオブジェクト内のデータバインディングによることができます。

function Vue(options){	
	this.el = options.el		// 元素
	this.data = options.data 	// 数据
	this.watcher = {}	// 属性、数据、元素 的关联
	
	var self = this 
	Object.keys(this.data).forEach(function(key){	// 遍历所有key
		self.proxyKeys(key); // 添加代理(data项的处理)
		self.defineProperty(self.data, key, self.data[key])	
	})
	
	// 解析DOM
	this.compile()	
}

Vue.prototype = {
    proxyKeys(key){
        var self = this 
        Object.defineProperty(this, key, {
            enumerable: false,
            configurable: true,
            get(){
                return self.data[key]
            },
            set(newVal){
                self.data[key] = newVal
            }
        })
    },
      
    // defineProperty、compile保持不变
    // ...
}

二、createDocumentFragment

私たちは、DOMノードトラバーサル操作、直接運転DOMを取るためには、ページのパフォーマンスに影響を与えます。

createDocumentFragment新しい空白のドキュメントフラグメントを作成します（DocumentFragment）。

DocumentFragmentsこれは、DOMノードです。彼らは、メインのDOMツリーの一部ではありません。ユースケースは、通常、文書の断片、断片文書への追加要素、DOMツリーに取り付けた後、ドキュメントフラグメントを作成しています。DOMツリーでは、文書セグメントは、そのすべての子要素に置き換えられています。ドキュメントフラグメントがメモリ上に存在するので、ないDOMツリーで、使用する文書の断片は、通常、より良いパフォーマンスになりますので。

Vue.prototype = {
    // ....

    compile(){	// 解析DOM即更新数据
		// 获取到对象绑定的元素
		var ele = document.querySelector(this.el);
		
		// 所有子元素
		var childEls = ele.childNodes;
		
		// 创建fragment
		var fragment = document.createDocumentFragment();
		
		// 获取到第一个子元素
		var child = ele.firstChild;
		while (child) {
	        // 将Dom元素移入fragment中
	        // appendChild: 如果被插入的节点已经存在于当前文档的文档树中，则那个节点会首先从原先的位置移除,然后再插入到新的位置
	        fragment.appendChild(child)
	        // 再获取第一个(其实就是下一个下一个的操作)
	        child = ele.firstChild
	    }
		
		// 遍历所有子元素
		[].slice.call(fragment.childNodes).forEach(el => {	
			var reg = /\{\{(.*)\}\}/;
			var text = el.textContent;
			if(reg.test(text)){	
				var key = reg.exec(text)[1]; 
				el.textContent = this.data[key]; 

				this.watcher[key] = function(newVal){
					el.textContent = newVal
				}
			}
		})
		
		// 添加
		ele.appendChild(fragment)
	}
}