Vue中的$nextTick的作用详解 | 您所在的位置:网站首页 › vue中component的作用 › Vue中的$nextTick的作用详解 |
我们首先看看官方的定义:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。也就是说Vue 在更新 DOM 时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新。 一.使用场景这里首先举个例子 {{number}} for(let i=0; i '原始的值' this.$nextTick(function () { console.log(this.$el.textContent) // => '修改后的值' })$nextTick() 会返回一个 Promise 对象,可以是用async/await完成相同作用的事情 this.message = '修改后的值' console.log(this.$el.textContent) // => '原始的值' await this.$nextTick() console.log(this.$el.textContent) // => '修改后的值' 二.实现原理我们定位到源码中: /src/core/util/next-tick.js callbacks也就是异步操作队列,callbacks新增回调函数后又执行了timerFunc函数,pending是用来标识同一个时间只能执行一次 export function nextTick(cb?: Function, ctx?: Object) { let _resolve; // cb 回调函数会经统一处理压入 callbacks 数组 callbacks.push(() => { if (cb) { // 给 cb 回调函数执行加上了 try-catch 错误处理 try { cb.call(ctx); } catch (e) { handleError(e, ctx, 'nextTick'); } } else if (_resolve) { _resolve(ctx); } }); // 执行异步延迟函数 timerFunc if (!pending) { pending = true; timerFunc(); } // 当 nextTick 没有传入函数参数的时候,返回一个 Promise 化的调用 if (!cb && typeof Promise !== 'undefined') { return new Promise(resolve => { _resolve = resolve; }); } }timerFunc函数定义,这里是根据当前环境支持什么方法则确定调用哪个,分别有: Promise.then、MutationObserver、setImmediate、setTimeout export let isUsingMicroTask = false if (typeof Promise !== 'undefined' && isNative(Promise)) { //判断1:是否原生支持Promise const p = Promise.resolve() timerFunc = () => { p.then(flushCallbacks) if (isIOS) setTimeout(noop) } isUsingMicroTask = true } else if (!isIE && typeof MutationObserver !== 'undefined' && ( isNative(MutationObserver) || MutationObserver.toString() === '[object MutationObserverConstructor]' )) { //判断2:是否原生支持MutationObserver let counter = 1 const observer = new MutationObserver(flushCallbacks) const textNode = document.createTextNode(String(counter)) observer.observe(textNode, { characterData: true }) timerFunc = () => { counter = (counter + 1) % 2 textNode.data = String(counter) } isUsingMicroTask = true } else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { //判断3:是否原生支持setImmediate timerFunc = () => { setImmediate(flushCallbacks) } } else { //判断4:上面都不行,直接用setTimeout timerFunc = () => { setTimeout(flushCallbacks, 0) } }无论是微任务还是宏任务,都会放到flushCallbacks使用,这里将callbacks里面的函数复制一份,同时callbacks置空,依次执行callbacks里面的函数。 function flushCallbacks () { pending = false const copies = callbacks.slice(0) callbacks.length = 0 for (let i = 0; i < copies.length; i++) { copies[i]() } }
|
CopyRight 2018-2019 实验室设备网 版权所有 |