Vue 中的nextTick()
简单理解Vue 中的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 //说明监听文本内容的修改。
})