defineProperty

vue2.0中的响应式跟踪实现原理就是Object.defineProperty

原理

通过Object.defineProperty将属性转化成拥有getter，setter方法的属性。
getter/setter方法是用户不可见的，但是vue内部会追踪依赖，在属性变化和修改时进行通知。

这也导致了vue在操作属性时的一些局限性

1.不能监测到对象属性的添加或删除(通过计算属性可以很明显的看到)
2.不能检测到数组长度的变化

• 通过arr.length直接改变数组长度
• 通过arr[1]={name:"jack"}

但是这并不是Object.defineProperty的局限性，而是vue出于性能考量而这么设计的，数组一般用于list的渲染,也就是说数据量会很大，如果vue对数组的每一项都添加监听的话，性能损耗太大

解决方案

添加

Vue.set()或this.$set()

删除

Vue.delete()或this.$delete()

数组

vue中对于数组的一些方法进行了代理封装，添加了响应式依赖，这样我们就可以追踪到数组的变化，修改或添加数据的时候触发视图更新
一共有7个方法

1. push()和pop()
2. shift()和unshift()
3. sort()和reverse()
4. splice()