Vue 中的nextTick()

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

this. $nextTick()和this.nextTick()的区别： this.$ 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

猜你喜欢