1 动态数据绑定

1) 代码

function Observer(data){
    this.data = data;
    this.walk(data);
}
Observer.prototype = {
    walk: function(data){
        for(let key in data){
            // for in 会把对象的原型链上所有可枚举属性列出来，而我们只想要遍历对象本身的属性
            if(data.hasOwnProperty(key)) {
                // 如果没有遍历到最底层，继续new Observer
                if(data[key] instanceof Object){
                    new Observer(data[key])
                }
                this.defineReactive(data, key, data[key]);    
            }            
        }
    },
    defineReactive: function(data, key, val){
        Object.defineProperty(data, key, {
            enumberable: true,
            configurable: true,
            get: function(){
                console.log('你访问了 ' + key);
                return val
            },
            set: function(newVal){
                if(newVal === val){
                    return
                }
                
                val = newVal;        
                // 同样 设置的值为object 需要new Observer将数据进行劫持
                if(newVal instanceof Object){
                    new Observer(val)
                }

                console.log('你设置了 '+ key + ', 新的值' + newVal);

            }
        })
    }
}

let app1 = new Observer({ name: 'youngwind', age: 110});
let app2 = new Observer({ university: 'bupt', major: 'computer'});
app1.data.name;
app1.data.age = 100;
app2.data.university;
app2.data.major = 'science';

2) 知识点

Object.defineProperty
vue.js 是通过它实现双向绑定的。我们可以通过这个方法，直接在一个对象上定义一个新的属性，或者是修改已有的属性。最终这个方法会返回该对象。它接受3个参数，而且都是必填的。

• object 目标对象
• propertyname 需要定义的属性或方法的名字
• descriptor 属性描述符

descriptor 属性的状态设置
【value】属性的值，默认为undefined
【writable】 是否可写，如果设置成false，则任何对该属性改写的操作都无效，
【configurable】如果为false，就不能再设置它的（value，writable，configurable）
【enumerable】是否能在for ... in 循环中遍历出来或在Object.keys中列举出来。
注意： 在调用Object.defineProperty()方法时，如果不指定，configurable, enumerable, writable特性的默认值都是false。
【get】一旦目标对象访问该属性，就会调用这个方法，并返回结果。默认为undefined。
【set】一旦目标对象设置该属性，就会调用这个方法。默认为undefined