简述 Vue 2.0 响应式数据的原理( 重点 )?

Vue 2.0 的响应式系统的核心是 Object.defineProperty,它允许 Vue 跟踪依赖,并在属性被访问和修改时通知变更。以下是 Vue 2.0 响应式数据的原理:

  1. 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

  2. 每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时,会通知 watcher,从而使它关联的组件重新渲染。

  3. Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际(已去重的)工作。

  4. Vue 在内部尝试对异步队列使用原生的 Promise.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用 setTimeout(fn, 0) 代替。

通过这种方式,Vue 能够智能地知道何时更新视图,而无需在数据变化时手动操作 DOM,这大大提高了应用的效率。

发表评论

后才能评论