Vue 中如何实现监测数组变化

vue中响应式数据的原理是通过Object.defineProperty控制getter和setter，并利用观察者模式完成的响应式设计。
数组考虑性能原因没有用defineProperty对数组的每一项进行拦截，而是选择重写数组api方法。
通过以上 Vue 源码部分查看，我们就能知道 Vue 框架是通过遍历数组 和递归遍历对象，从而达到利用Object.defineProperty() 也能对对象和数组（部分方法的操作）进行监听。
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

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

总结：
使用函数劫持的方式，重写了数组的方法
Vue 将 data 中的数组，进行了原型链重写。指向了重新定义的数组原型方法，这样当调用数组
API 的时候，可以通知依赖更新。如果数组中包含着引用类型。会对数组中的引用类型再次进行监控。

/**
 * Observe a list of Array items.
 */
observeArray (items: Array<any>) {
 for (let i = 0, l = items.length; i < l; i++) {
 observe(items[i]) // observe 功能为监测数据的变化
 }
}
/**
 * 对属性进行递归遍历
 */
let childOb = !shallow && observe(val) // observe 功能为监测数据的变化控拦截处理

所以用vue开发时，对于响应式数组，使用push、splice、pop等方法改变数组时，页面会及时体现这种变化
vue2对数组的监听存在两个缺陷
无法监测数组的新增
无法监测用索引改变数组的操作

Vue3是用Proxy来进行对象、数组的代理