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来进行对象、数组的代理

猜你喜欢

转载自blog.csdn.net/zhangwenok/article/details/125096588