VUE2的响应式原理中所用的Object.defineProperty的缺点

我们都知道vue2响应式原理是通过Object.defineProperty来实现的，通过劫持各属性的setter和getter，监听数据的变化。

Object.defineProperty 的缺点

1. 无法监听对象属性的新增和删除

   let num = 3
   const cat = {
   	name: '大橘',
   	sex: 'boy',
   	age: 5
   }
   Object.defineProperty(cat,'age',{
   	get() {
   		console.log('get value')
   		return num
   	},
   	set(val) {
   		console.log('set value', val)
   		num = val
   	}
   })
   cat.age = 6 // 可以被监听到
   cat.breed = '狸花猫' // 无法被监听到
   

   解决方式
   新增属性

   this.$set(this.obj, 'a', 'abc')
   

   删除属性

   this.$delete(this.obj, 'a')
   

2. 无法监听数组下标的变化，通过数组下标修改元素，无法实时响应。基于性能考虑vue2放弃了Object.defineProperty这一特性，如果数组长度过大，比如1000条，性能代价和用户体验收益不成正比 参考

   push()
   pop()
   shift()
   unshift()
   splice()
   sort()
   reverse()
   

3. 只能劫持对象的属性，所以我们需要对每个对象的所有属性进行遍历，然后需要深拷贝进行修改
   而Proxy可以监听对象而非属性，相比前者具有更好的性能