【面试题系列Vue04】Vue.js中 $nextTick 原理及作用

作用:

$nextTick主要用于延迟执行某个函数,直到下一次DOM更新循环结束之后。这通常在你修改了一些数据,并且想要等待Vue完成DOM的重新渲染后,才执行依赖于新DOM的操作时使用。

常见的使用场景包括:

  • 在DOM更新后执行DOM依赖的操作,如操作滚动位置、聚焦输入框、或是基于新布局的计算。
  • 在进行了一系列数据更新后,确保所有的DOM变更都已完成。

原理:

Vue.js 使用异步队列的方式来处理DOM更新。当你修改数据时,视图不会立即重新渲染。相反,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个"watcher"被多次触发,只会被推入到队列中一次。这种在缓冲时去重的机制避免了不必要的计算和DOM操作。然后,在下一个事件循环"tick"中,Vue刷新队列并执行实际的(已去重的)工作。

nextTick实际上是在内部使用了微任务(microtask),如Promise或MutationObserver(在不支持Promise的浏览器中)。这些微任务在JavaScript的事件循环中的当前任务结束后,下一个任务开始前执行。因此,使用nextTick可以确保它内部的回调函数在DOM更新完成后立即执行。

代码

javascript 复制代码
export default {
  data() {
    return {
      message: 'Hello'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Updated';
      this.$nextTick(() => {
        // 这个代码块将在DOM更新完成后执行
        console.log('DOM updated');
      });
    }
  }
}

在这个例子中,当updateMessage方法被调用时,message数据会被更新。由于Vue的DOM更新是异步的,直接在数据更新后打印DOM可能还是旧的。使用$nextTick可以确保在DOM更新后执行代码,此时DOM已经是最新的。

总结

nextTick 是典型的将底层 JavaScript 执行原理应用到具体案例中的示例,引入异步更新队列机制的原因∶

如果是同步更新,则多次对一个或多个属性赋值,会频繁触发 UI/DOM的渲染,可以减少一些无用渲染。同时由于 VirtualDOM 的引入,每一次状态发生变化后,状态变化的信号会发送给组件,组件内部使用 VirtualDOM 进行计算得出需要更新的具体的 DOM 节点,然后对 DOM 进行更新操作,每次更新状态后的渲染过程需要更多的计算,而这种无用功也将浪费更多的性能,所以异步渲染变得更加至关重要。

Vue 采用了数据驱动视图的思想,但是在一些情况下,仍然需要操作DOM。有时候,可能遇到这样的情况,DOM1 的数据发生了变化,而 DOM2需要从 DOM1 中获取数据,那这时就会发现 DOM2 的视图并没有更新,这时就需要用到了 nextTick 了。

总结来说,$nextTick是处理Vue中数据变更后DOM更新异步性的一种有效工具,它确保了在进行DOM依赖操作时,DOM状态是最新的。

相关推荐
牧羊人_myr12 分钟前
Ajax 技术详解
前端
浩男孩21 分钟前
🍀封装个 Button 组件,使用 vitest 来测试一下
前端
蓝银草同学25 分钟前
阿里 Iconfont 项目丢失?手把手教你将已引用的 SVG 图标下载到本地
前端·icon
布列瑟农的星空36 分钟前
重学React —— React事件机制 vs 浏览器事件机制
前端
程序定小飞1 小时前
基于springboot的在线商城系统设计与开发
java·数据库·vue.js·spring boot·后端
一小池勺1 小时前
CommonJS
前端·面试
孙牛牛1 小时前
实战分享:一招解决嵌套依赖版本失控问题,以 undici 为例
前端
用户52709648744901 小时前
Git 最佳实践
前端
星秀日1 小时前
JavaWeb--Ajax
前端·javascript·ajax