跳到主要内容

Vue 异步渲染

Vue的异步渲染机制是其响应式系统的一个核心特性，旨在提高应用的性能和响应速度。这个机制确保了当数据变化时，视图更新（即DOM更新）是异步执行的，而不是每次数据变化立即更新DOM。这样做的目的是为了合并多次数据变化，从而减少对DOM的操作次数，因为DOM操作是Web开发中成本相对较高的操作。

工作原理​

Vue在内部维护了一个异步更新队列。当观察到响应式数据发生变化时，Vue会将组件的更新（渲染函数的再次调用）推迟到下一个事件循环“tick”中执行。如果在同一个事件循环中有多次数据变化，Vue会将它们合并，只执行一次组件更新，这就是所谓的批量或异步更新。

实现机制​

  1. 依赖收集：当组件进行渲染时，Vue会跟踪响应式数据的访问，从而建立起组件和数据之间的依赖关系。
  2. 观察者模式：Vue使用观察者模式来监听数据的变化。每当数据变化时，观察者（Watcher）会被通知。
  3. 异步队列：当数据变化时，不是立即触发更新，而是将观察者（代表着组件的更新）放入一个异步队列中。Vue使用Promise.then（或者MutationObserver，如果Promise不可用的话）来实现微任务队列，确保更新操作在当前事件循环的末尾执行。
  4. 批量更新：在下一个事件循环“tick”中，Vue遍历并清空队列，执行更新。如果同一个观察者（即同一个组件）在同一事件循环中多次触发更新，Vue会对此进行去重，确保每个组件在一个事件循环中只更新一次。

使用nextTick​

开发者可以使用Vue.nextTick或组件实例的this.$nextTick方法，在DOM更新完成后执行某些操作。因为Vue的DOM更新是异步的，所以如果你直接在数据变化后访问DOM，可能得不到更新后的结果。nextTick允许你在DOM更新完成后，以回调的方式运行代码。

// 示例：在数据变化后，使用nextTick访问更新后的DOM
this.message = 'Hello';
this.$nextTick(() => {
  // 这个回调将在DOM更新后被调用
  console.log(this.$el.textContent); // 输出更新后的内容
});

降级策略​

  • 优先使用 microtask：
Promise => MutationObserver(H5 API)
  • 降级使用
setImmediate(IE、Node) => MessageChannel(兼容性) => setTimeout

Vue的异步渲染机制通过将DOM更新推迟到下一个事件循环中执行，并合并在同一事件循环中发生的多次数据变化，从而优化性能，减少不必要的DOM操作。这种机制对于开发高性能应用是非常关键的。