vue数据双向绑定

1. .defineProperty(obj, prop, de or)
   核心函数，重新给对象定义属性，主要内容内容集中再重定义set跟get函数。

     let data={name:\'cen\'}
     let value=data.name
       .defineProperty(data,\'name\',{

          get:function(){
            console.log(\'获取\');
            return value
          },
          set:function(){
            console.log(\'改变\');
          }
      })  
       console.log(data.name);

2. .keys(obj)会返回一个由一个给定对象的自身可枚举属性组成的数组

     let data={name:\'cen\',address:\'beijin\',shool:{midle:\'hainan\',college:\'qingdao\'}}
     
     console.log( .keys(data));

.keys(obj)返回的数组为obj的一级属性名，如果想要遍历全部字段可以使用循环调用实现。

获取所有node节点

  ////获取所有带有{{}}已经v-指令的标签节点
     function getNode(node){
         var reg = /\\{\\{(.*)\\}\\}/;
          node.childNodes.forEach((item,index)=>{      
               if(item.childNodes&&node.childNodes.length){    
                   getNode(item)
               }
               let nodeAttrs= item.attributes;
               if(nodeAttrs){
                     Array.prototype.forEach.call(nodeAttrs, function(attr) {
                     if(attr.name.substring(0,2)==\'v-\'){
                         Dep.target=item;
                         item.value=data[attr.value]
                         Dep.target=null;
                         item.addEventListener(\'input\',function(e){
                            var newValue = e.target.value;
                            if (data[attr.value] === newValue) {
                                return;
                            }
                            data[attr.value]= newValue;
                         })
                     }   
                });
               }
         
               if(item.nodeType==1&& reg.test(item.textContent)){
                    Dep.target=item;
                    let key=reg.exec(item.textContent)[1] 
                    item.textContent=data[key] 
                     Dep.target=null;            
               }
          })
       
          
     }
    getNode( document.getElementById(\'body\'))

获取所有data的属性并重新定义property

  ///重新定义数据的属性
    function defineProperty(data,key,value){
        let dep=new Dep();
         .defineProperty(data,key,{
            enumerable: true,
            configurable: true,
            set:function(val){
                 value=val
                 dep.updata(key);
            },
            get:function(){
                if(Dep.target){
                   dep.addSubs(Dep.target)
                }
                return value
            }
        })
    }
    ///获data可枚举属性
    function observer(data){
         .keys(data).forEach(key=>{
            if(typeof(data[key])==\' \'){
              observer(data[key])
              return 
            }
            defineProperty(data,key,data[key])
        })
    }
    ///订阅器数组
    function Dep() {
        this.subs=[]
    }
    Dep.prototype={
        updata(key){  
          this.subs.forEach(item=>{    
                  if(item.tagName==\'INPUT\'){////判断是否为input标签
                       item.value=data[key]
                  }
                  else{
                       item.textContent=data[key]
                  }
                 
          })
        },
        addSubs(sub){
            this.subs.push(sub);
        }
    }
    observer(data)

源码：