Vue 中的nextTick()

最新推荐文章于 2025-05-29 11:00:37 发布

pamerely

最新推荐文章于 2025-05-29 11:00:37 发布

阅读量376

点赞数

分类专栏：个人笔记 vue 文章标签： Vue nextTick mutationObserver

vue 同时被 2 个专栏收录

21 篇文章

订阅专栏

个人笔记

10 篇文章

订阅专栏

本文深入探讨Vue.js框架中的nextTick()函数作用与实现原理。解析其在DOM更新后的回调机制，及如何在create()钩子中正确使用，确保在数据变化后执行DOM操作。nextTick()利用Promise、MutationObserver或setTimeout实现异步更新回调。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单理解Vue 中的nextTick()的作用

this. $n e x t T i c k () 和 t h i s . n e x t T i c k () 的区别： t h i s .$ nextTick(callback),当DOM发生变化，更新后执行的回调；
this.nextTick(callback),当数据发生变化时，更新后执行的回调。

在create()钩子函数中需要进行DOM操作时，需要将相应的js代码放在Vue.nextTick()的回调函数中。

浅谈Vue.nextTick实现原理
执行的过程
timeFunc()
先判断是否原生支持promise，如果支持，则利用promise来触发执行回调函数；
否则，如果支持MutationObserver，则实例化一个观察者对象，观察文本节点发生变化时，触发执行所有回调函数。
如果都不支持，则利用setTimeout设置延时为0。

MutationObserver是HTML5中的新API，是个用来监视DOM变动的接口。他能监听一个DOM对象上发生的子节点删除、属性修改、文本内容修改等等。
调用过程很简单，但是有点不太寻常：你需要先给他绑回调：

var mo = new MutationObserver(callback)

通过给MutationObserver的构造函数传入一个回调，能得到一个MutationObserver实例，这个回调就会在MutationObserver实例监听到变动时触发。
这个时候你只是给MutationObserver实例绑定好了回调，他具体监听哪个DOM、监听节点删除还是监听属性修改，还没有设置。而调用他的observer方法就可以完成这一步:

var domTarget = 你想要监听的dom节点
mo.observe(domTarget, {
      characterData: true //说明监听文本内容的修改。
})

在这里插入图片描述

资料来源：https://www.jianshu.com/p/a7550c0e164f