Vue2 中封装的数组方法,如何实现页面更新

98 阅读1分钟

场景

在Vue2中,对响应式处理利用的是Object.defineProperty对数据进 行拦截,而这个方法并不能监听到数组内部变化,数组长度变化,数 组的截取变化等,所以需要对这些操作进行hack,让Vue能监听到 其中的变化

会触发更新的数组方法

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

1716912114888.jpg

原理

  • 简单来说就是,重写了数组中的那些原生方法,首先获取到这个数组 的__ob__,也就是它的 Observer 对象,如果有新的值,就调用 observeArray 继续对新的值观察变化(也就是通过target__proto__ == arrayMethods 来改变了数组实例的原型),然后手动调用notify, 通知渲染watcher,执行update

Vue data 中某一个属性的值发生改变后,视图会立即同步执行重新渲染吗

  • 不会立即同步执行重新渲染。Vue 实现响应式并不是数据发生变化之 后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列, 并缓冲在同一事件循环中发生的所有数据变更。
  • 如果同一个watcher被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环nextTick中,Vue 刷新队列并执行实际(已去重的)工作

---------------------------------------------------------------------------2024.5.27每日一题