vue动态双向绑定数据原理

<input type="text" id="input">
<view class="" id="view"></view>

//检测对象的变化。
　　　　 var input = document.getElementById('input');
        var view = document.getElementById('view');

        var data = {
            valueObj :{
                value:'zwq'
            }
        }
        //当输入框数据发生改变时，数据跟着改变
        input.oninput = function(){
            data.valueObj.value = this.value;
        }
        
        // 更新视图
        function upData(data){   
            view.innerText = data.valueObj.value;
        }
        
        upData(data);
        obServe(data);

        // 监控某个对象是否发生改变
        function obServe(data){
           //判断当前传的是否是对象，如果不是，直接return
            if(!data || !(data instanceof Object)){return data} 　　　　　　//获取所有属性名。使用keys方法可以获取所有属性名（包括原型上的）并保存带数组中
            var arrProperty = Object.keys(data);　　　　　　 //遍历数组，调用defindRective检测每一个属性值的改变　
            arrProperty.forEach(function(key){　　　　　　　　　　defindRective(data,key,data[key]); //传入3个参数，当前对象，当前属性，当前属性值
            })
        }

        function defindRective(obj,key,val){
           obServe(val);   //使用递归，当想上面的数组，对象套对象的形式，由于里面的对象是一个引用值，无法检测里面的数据变化，所以使用递归。
            Object.defineProperty(obj,key,{  //核心:使用Object,definPropert的set检测数据的改变。
                set(newValue){
                    console.log(5);
                    if(newValue == val) return val;
                    val = newValue;
                    upData(obj);   //当数据变化，跟新视图
                },
                get(){
                    return  val;
                }
            })
        }