Vue数据劫持原理

以下通过代码的形式去实现了数据劫持，用到的函数为Object.defineProperty()

let a = {
  a1: {
    a11: 11,
    a12: 12,
    a13: {
      a111: 111,
      a112: 112,
    },
  },
  a2: 2,
  a3: 3,
};

//递归遍历每一个value
function observe(obj) {
  //如果当前传入的值不为对象，则返回，否则，继续遍历他们每一个子元素
  if (typeof obj !== 'object') return;
  //执行遍历对象
  new Observe(obj);
}

//循环遍历对象的每一个key
class Observe {
  constructor(obj) {
    this.obj = obj;
    this.walk();
  }
  walk() {
    //将每一个对象的keys收集起来遍历，并且监听每一个key
    Object.keys(this.obj).forEach(ele => defineReactive(this.obj, ele));
  }
}

//封装数据劫持
function defineReactive(data, key, value = data[key]) {
  // 把每一个value都交给observe判断是否为对象
  observe(value);
  Object.defineProperty(data, key, {
    get() {
      console.log('你正在访问' + key);
      return value;
    },
    set(newValue) {
      if (newValue === value) return;
      console.log('你正在修改' + key, '新值为' + newValue);
      value = newValue;
    },
  });
}

new Observe(a);

简单总结：页面刚上来调用new Observe（）把需要被监听的对象传入监听每一个keys，但是如果每一个对象下面还有对象，这时候就需要递归，我们在defineReactive()函数中把每个值都传给observe()用来判断当前值是否为object,如果是，就遍历他当前下的元素，一次递归，最终监听到每个值