简单实现vue双向数据绑定

 前端面试常见问题，双向数据绑定实现的原理。

重点1：通过Object.defineProperty 为每个数据节点设置get，set方法，实现对数据的劫持，数据内容改变必须经过set方法，因此就可以在数据改动经过set方法时，去改变页面数据显示。以此实现了数据到页面的单向绑定。

重点2：通过监听input等页面元素的changge，input等事件，node.addEventListener("input",e=>{});可以得到页面输入容的变化，将变化的内容再修改js数据对象中。以此完成页面输入值更新到内存数据对象的操作。

注：通过1，2两点已经可以完成双向数据的绑定。第3点并不是必须的，只是用于提升性能，提高实用性的，因为如果没有第3点的虚拟文档功能，每次数据变更都进行大量dom的渲染，性能消耗过大，页面将无法流程运行。

重点3：虚拟文档，或者叫文档碎片 ，document.createDocumentFragment() 可以创建一个虚拟文档对象，可以像操作页面dom元素一样操作这个虚拟文档，却别是操作页面文档会进行实时的文档渲染显示，性能消耗非常大， 而虚拟文档节点只是内存对象，并不会进入任何渲染计算，可以高效的进行对虚拟文档中的节点进行操作。当需要做的处理全部完成后，再将虚拟文档中的节点一次性加载到页面dom中，页面只需要渲染一次，就可以完成所有的更新。

下面是代码实现，此实现只提供实现逻辑，并未完善所以的情况，不可用于真实生产情况。

	
		
		
	
	
		

			名称：{{name }}({{sex}})
			
			
			

			更多：{{ more.like }}