场景
在Vue2中,对响应式处理利用的是Object.defineProperty对数据进 行拦截,而这个方法并不能监听到数组内部变化,数组长度变化,数 组的截取变化等,所以需要对这些操作进行hack,让Vue能监听到 其中的变化
会触发更新的数组方法
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
原理
- 简单来说就是,重写了数组中的那些原生方法,首先获取到这个数组 的__ob__,也就是它的 Observer 对象,如果有新的值,就调用 observeArray 继续对新的值观察变化(也就是通过target__proto__ == arrayMethods 来改变了数组实例的原型),然后手动调用notify, 通知渲染watcher,执行update
Vue data 中某一个属性的值发生改变后,视图会立即同步执行重新渲染吗
- 不会立即同步执行重新渲染。Vue 实现响应式并不是数据发生变化之 后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列, 并缓冲在同一事件循环中发生的所有数据变更。
- 如果同一个watcher被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环nextTick中,Vue 刷新队列并执行实际(已去重的)工作
---------------------------------------------------------------------------2024.5.27每日一题