Vue 双向绑定(1) : 数据劫持

关于Vue的双向绑定原理，网上说的大同小异，数据劫持，订阅者发布者模式，diff算法几个核心，这里先记录一下数据劫持部分。使用的是vue2的Object.defineProperty实现（vue3据说使用了es6的Proxy实现，这个到时候再研究）。

 

1.劫持一个对象

      let person = {
          name:'jiapeng',
          age:18
      }

常规写法：

  	Object.defineProperty(person,'name',{
  		enumerable:true,
  		configurable:true,
  		set(newVal){
  			person.name = newVal;
  		},
  		get(){
  			console.log('get');
  			return person.name;
  		}
  	})

  	console.log(person.name);

结果会发现，Uncaught RangeError: Maximum call stack size exceeded ，栈溢出了，原因就是get函数return person.name又会触发get函数，就出现了无限递归的情况。

---

根据上述问题进行改进

第一种方法：创造一个新的实例变量 _name, 这样一来，name知识一个访问接口，实际操作的变量是 _name，这一点也可以用于