动态数据绑定（二）

动态数据绑定（一）

vue早期源码学习系列之一：如何监听一个对象的变化

方法一

// 观察者构造函数
function Observer(data) {
  this.data = data;
  this.walk(data)
}

let p = Observer.prototype;

// 此函数用于深层次遍历对象的各个属性
// 采用的是递归的思路
// 因为我们要为对象的每一个属性绑定getter和setter
p.walk = function(obj) {
  let val;
  for (let key in obj) {
    // 这里为什么要用hasOwnProperty进行过滤呢？
    // 因为for...in 循环会把对象原型链上的所有可枚举属性都循环出来
    // 而我们想要的仅仅是这个对象本身拥有的属性，所以要这么做。
    if (obj.hasOwnProperty(key)) {
      val = obj[key];

      // 这里进行判断，如果还没有遍历到最底层，继续new Observer
      if (typeof val === 'object') {
        new Observer(val);
      }

      this.convert(key, val);
    }
  }
};

p.convert = function(key, val) {
  Object.defineProperty(this.data, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      console.log('你访问了' + key);
      return val
    },
    set: function(newVal) {
      console.log('你设置了' + key);
      console.log('新的' + key + ' = ' + newVal)
      if (newVal === val) 
        return;
      val = newVal
      if(typeof val === "object"){
        new Observer(val);
      }
    }
  })
};

let data = {
  user: {
    name: "liangshaofeng",
    age: "24"
  },
  address: {
    city: "beijing"
  }
};

let app = new Observer(data);
app.data.user.name 
app.data.user = {
  job: 'front-end'
}
app.data.user.job
app.data.user.job = 'back-end'

    
    


            var app1 = new Observer({
            name: 'youngwind',
            age: 25,
            edu: {
                university: 'bupt',
                major: 'computer'
            }
        });
        
        var app2 = new Observer({
          university: 'bupt',
          major: 'computer'
        });
        
        // 要实现的结果如下：
        app1.data.name // 你访问了 name
        app1.data.age = 100;  // 你设置了 age，新的值为 100
        app1.data.edu.university;  // 你访问了 edu  你访问了 university
        app1.data.edu.major = 'science';  // 你访问了 edu  你设置了 major，新的值为 science
        app1.data.edu = {
            university: 'cnu',
            major: 'core'
        };  // 你设置了 edu，新的值为 {university: 'cnu',major: 'core'}
        app1.data.edu.university;  // 你访问了 edu  你访问了 university
        app1.data.edu.major = 'science';  // 你访问了 edu  你设置了 major，新的值为 science
        
        app2.data.university // 你访问了 university
        app2.data.major = 'science'  // 你设置了 major，新的值为 science
    
运行一下