vue双向绑定原理

vue模板文件浏览器无法识别，我们需要将v-model，{{}}等语法转换成浏览器可以识别的语法，页面上文档片段的作用允许回显文本值：可以将需要插入的节点放在文档片段上，最后一次性插入到文档中//创建一个Vue函数初始化参数functionVue(options){this.data=选项.数据；this.el=options.el;//nodeToFragment函数返回浏览器识别的dom元素letdom=nodeToFragment(document.getElementById(this.el),this);文档。getElementById(this.el).appendChild(dom);}/**获取生成的dom元素节点：appdom元素vmvue对象**/functionnodeToFragment(node,vm){//创建文档片段letfragment=document.createDocumentFragment();while(node.firstChild){//如果是子元素，编译其内容compile(node.firstChild,vm);//将编译后的内容插入到模板片段中，每插入一个元素，对应的节点删除对应的元素（appendChild的函数）fragment.appendChild(node.firstChild);}返回片段；}//编译内容functioncompile(node,vm){switch(node.nodeType){//元素节点case1:letatrr=node.attributes;for(leti=0;i{item.update();});},};Observer：当使用data数据时，会触发get方法并将observer存放在dep中，当给data赋值时，会触发set方法，从而触发dep的notify方法，更新所有使用的数据Dataview//Observer，观察数据变化functionobserve(obj){for(constkeyinobj){defaultReactive(obj,key,obj[key]);}}//用Object.defineProperty监听每个数据ValuechangefunctiondefaultReactive(obj,key,val){//每个属性都有一个depletdep=newDep();Object.defineProperty(obj,key,{get:function(){if(Dep.target){dep.addSub(Dep.target);}returnval;},set:function(newVal){if(newVal==val){return;}val=newVal;//一旦数据改变，必须通知改变尝试，并告诉订阅者dep.notify();},});}当观察者和订阅者都完成后，我们需要修改一些模板编译内容，文本{{text}}使用数据值，即一个订阅者letreg=/\{\{(.*)\}\}/;if(reg.test(node.nodeValue)){letname=RegExp.$1;//node.nodeValue=vm.data[名称];新观察者（虚拟机，节点，名称）；}函数Vue(options){this.data=options.data;this.el=options.el;观察（这个。数据）；让dom=nodeToFragment(document.getElementById(this.el),this);document.getElementById(this.el).appendChild(dom);}