1.vue2.x中的数据异步更新和nextTick方法解析
2.学透Vue源码~nextTick原理
3.Vue2.0源码阅读(2) —vue.nextTicket()
4.Vue.nextTick原理分析
5.Vue3之事件循环、nextTick与源码解析
6.Vue.nextTick 的原理和用途
vue2.x中的数据异步更新和nextTick方法解析
前言
众所周知,vue中的更新时异步的,比如this.msg=xxx,你看起来他是立马更新了,其实并没有。快快二手车网站源码它会异步执行,接下来就来看看怎么实现的吧。
先上图首先从数据改动开始说起调用this.msg=xxx数据发生变更
在数据初始化阶段已经收集了依赖的watcher到dep中,执行dep.notify通知watcehr变更
notify方法遍历调用所有以来的watcher的update方法,把当前watcher实例放入queueWatcher函数中执行,接下来就是异步更新的关键了,看代码
queueWatcher函数代码在src\core\observer\scheduler.js主要作用:把当前watcher实例添加到一个queue中
exportfunctionqueueWatcher(watcher:Watcher){ //拿到watcher的唯一标识constid=watcher.id//无论有多少数据更新,相同的watcher只被压入一次//我理解这就是为什么在一次操作中,多次更改了变量的值,但是只进行了一次页面更新的原因,//同一变量依赖它的watcher是一定的,所以已经存在了就不再放进watcher队列中了,也不会走后面的逻辑if(has[id]==null){ //缓存当前的watcher的标识,用于判断是否重复has[id]=true//如果当前不是刷新状态,直接入队if(!flushing){ queue.push(watcher)}else{ //ifalreadyflushing,splicethewatcherbasedonitsid//ifalreadypastitsid,itwillberunnextimmediately.//此处能走到这儿,说明flushSchedulerQueue函数被执行了watcher队列已经正在开始被更新了,//并且在执行某个watcher.run方法的时候又触发的数据响应式更新,重新触发了queueWatcher//因为在执行的时候回有一个给watcher排序的操作,所以,当watcher正在更新时已经是排好顺序了的,此时需要插入到特定的位置,保持watcher队列依然是保持顺序的leti=queue.length-1while(i>index&&queue[i].id>watcher.id){ i--}queue.splice(i+1,0,watcher)}//queuetheflush//waiting表示当前的flushSchedulerQueue还没有被执行,因为还没有重置状态,waiting仍然为true//所以waiting的意义就是表明是否执行了flushSchedulerQueue,if(!waiting){ waiting=true//直接同步刷新队列if(process.env.NODE_ENV!=='production'&&!config.async){ //同步执行flushSchedulerQueue()return}//把更新队列函数放到异步队列中nextTick(flushSchedulerQueue)}}}flushSchedulerQueue代码在相同目录下//主要作用:遍历执行每一个watcher的run方法,进而实现数据和视图的更新,并在执行完所有的方法之后,重置状态,表示正在刷新队列的flushing,表示watcher是否存在的has,表示是否需要执行nexttick的waiting
functionflushSchedulerQueue(){ //当方法被执行时,设置为正在刷新状态,以示可以继续执行nextTick方法flushing=true//把队列中的watcher排个序,/***排序的作用:(此句照搬照抄而来)*1.保证父组件的watcher比子组件的watcher先更新,因为父组件总是先被创建,子组件后被创建*2.组件用户的101源码是多少watcher在其渲染watcher之前执行。*3.如果一个组件在其父组件执行期间被销毁了,会跳过该子组件。*/queue.sort((a,b)=>a.id-b.id)//中间略去若干代码...//遍历queue中存的所有的watcher,执行run方法更新for(index=0;index<queue.length;index++){ watcher=queue[index]watcher.run()}//因为queue是在一个闭包中,所以当遍历执行完毕了,就把队列清空queue.length=0;//has是判断当前watcher是否重复,作为是否把watcher放进queue的依据//此时已经执行完了queue中的所有watcher了,之前已经执行过的watcher如果发生了变更,可以重新加入了has={ }//waiting是判断是否执行nextTick的标识,当前的刷新队列已经执行完毕了,说以,可以设置为false了,执行下一轮的的添加异步事件队列的方法//flushing是判断是否当前异步事件正在执行的标志,当前更新完毕,作为判断watcher入队的形式waiting=flushing=false}nextTick方法源码src\core\util\next-tick.js
exportfunctionnextTick(cb?:Function,ctx?:Object){ let_resolve//把执行更新操作之后的回调函数添加到队列里//用trycatch包装一下传进来的函数,避免使用$nextTick时,传入的回调函数出错能够及时的捕获到//只要执行了nextTick函数,就把回调函数添加到回调列表里//这里的cb回调函数就是flushSchedulerQueue函数,里面执行了queue中存放的所有的watcher.run方法callbacks.push(()=>{ if(cb){ try{ cb.call(ctx)}catch(e){ handleError(e,ctx,'nextTick')}}elseif(_resolve){ _resolve(ctx)}})//通过pending来判断是否需要向任务队列中添加任务//如果上一个清空回调列表的当flushCallbacks函数还在任务队列中,就不往任务队列中添加//第一次执行时,就默认就添加一个进任务队列,一旦添加进任务队列,就表明暂时不在需要往任务队列中添加flush函数//当执行了上一个flushCallbacks函数的时候,pending修改为false,表明可以重新添加一个清空回调列表的flush函数到任务队列了if(!pending){ pending=true//这里是调用清空callbacks数组中方法,并执行的函数,timerFunc()}//$flow-disable-line//判断当前环境是否支持promise,如果支持的话,可以返回一个期约对象,if(!cb&&typeofPromise!=='undefined'){ returnnewPromise(resolve=>{ _resolve=resolve})}}timerFunc()方法,主要是做一些降级操作,实现异步的关键
timerFunc=()=>{ Promise.resolve().then(flushCallbacks)}//如果当前环境不支持的话,会进行一定的降级操作,直到最后,用宏任务settimeout来处理看看flushCallbacks,任务就是执行了所有的callbacks函数
functionflushCallbacks(){ //如果开始执行了flushCallbacks说明,当前的异步任务已经为空了,如果此时再nextTick方法会添加新的类似陀螺世界源码任务进去了pending=false//拷贝一份callbacks中的所有回调函数,用于执行constcopies=callbacks.slice(0)//随即删除所有callbackscallbacks.length=0//当微任务队列中的flushCallbacks添加到执行栈中了,就执行callbacks中的所有的函数//也就是调用执行每一个flushSchedulerQueue函数,然后遍历执行每一个函数for(leti=0;i<copies.length;i++){ copies[i]()}}基本关键变量的作用waiting:变量,作为是否执行nextTick,添加flushSchedulerQueue方法的关键,标志着callbacks中是否有flushSchedulerQueue方法,比如同一个变量的改变,可能会影响多个watcher,因为执行flushSchedulerQueue是异步的,遍历dep.update先把所有的watcher都放入到queue中,也才只执行了一次nextTick,callbacks中也只有一个方法。虽然当第一次方如watcher时就会执行nexttick把flushSchedulerQueue方法放入callbacks中,看起来好像已经要执行了,但是因为queue是闭包变量,所以,后续的变量仍然可以添加queue中,
flushing::表示是否正在执行flushSchedulerQueue方法,如果是正在执行更新方法的话,对向已经排好序的watcher队列中添加新的watcher,需要把新watcher插入到排好序的指定的位置,这也就是为什么遍历watdher那块儿会直接使用queue.length的原因,这个长度会发生变化。
pending::pending是决定是否把更新callbacks数组的方法放入异步队列的关键,保证了异步队列中只有一个清空callbacks的任务,也就解释了,连续手动执行多个$nextTick方法不会立即执行,也还是会把他们的回调放入callbacks中,然后等到任务都执行完毕了,一下把所有的回调函数都执行掉。
参考
vue源码
/post/
学透Vue源码~nextTick原理
nextTick的官方解释:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
例如:我们有如下代码:
第一次输出结果为hello world,第二次结果为更新后的Hello World。
即我们在update方法中第一行对message的更新,并不是马上同步到span中,而是在完成span的更新之后回调了我们传入nextTick的函数。
Vue中数据的更新不会同步触发dom元素的更新,也就是苹果cms源码asp说dom更新是异步执行的,并且在更新之后调用了我们传入nextTick的函数。
那么问题来了,Vue为什么需要nextTick呢?nextTick又是如何实现的呢?
为了理解nextTick的设计意图和实现原理,我们需要理解Vue的响应式原理,包括数据劫持、依赖收集和数据代理等概念。我们需要实现一个简易版的Vue,用于创建Vue对象,处理参数el和data,并使用Object.defineProperty()方法实现数据劫持。
接下来,我们实现Observe类用于监听数据变化,通过get方法收集依赖并存储到Dep类中。Dep类保存依赖,并在数据变更时调用Watcher类,Watcher类观察数据变化,触发依赖收集并在数据变更后执行更新。
通过以上的代码,我们就实现了一个简易版的Vue,用于模拟dom变更。
为什么要使用nextTick?当我们对数据进行频繁更新时,可能会导致严重的性能问题。Vue使用nextTick来优化这个问题,避免频繁的DOM更新操作,只在合适的时机执行一次DOM更新。
为了实现异步更新,Vue使用事件循环机制。每次事件循环期间,Vue将数据变更缓存起来,只在最后一次视图渲染时执行一次DOM更新操作。
Vue中nextTick的实现涉及异步更新队列的概念。Vue为每个要观察的数据创建Watcher对象,当数据变更时,会触发Watcher对象的update方法,但不再立即执行更新操作,而是将变更的Watcher对象保存到待更新的队列中。在微任务中,强势启动趋势源码Vue执行更新队列中的更新操作。
Vue实现nextTick的核心原理包括依赖收集、数据劫持、事件循环机制和异步更新队列。通过这些原理,Vue能够在确保数据响应式的同时,优化性能,减少无效的DOM更新操作。
Vue2.0源码阅读(2) —vue.nextTicket()
揭开Vue.nextTick之谜
在vue圈子中,有一句广为流传的“都市传说”:“遇事不决,问nextTick。”这句话背后的nextTick究竟是何物?根据官方文档的解释,nextTick()是在下次DOM更新循环结束之后执行延迟回调。其核心功能是在数据更新后自动调用回调函数,获取更新后的DOM。接下来,我们将深入源码,一探nextTick的真谛。
将nextTick定义至Vue原型链的代码位于src/core/instance/render.js,具体实现则在src/core/util/next-tick.js。nextTick接受两个参数:函数cd(实际使用场景中,为延迟执行的函数)与this上下文。内部定义了一个回调函数数组callbacks,当cb存在时将其添加至数组,同时将回调函数的上下文指向组件的this;若cb不存在,则将resolve函数添加至数组。接着判断pending值,其用于控制状态。当pending值为false,表示无回调函数正在执行,进而执行timerFunc函数。timerFunc函数在cb不存在且浏览器支持Promise时返回一个Promise,允许在不传入回调的情况下通过this.$nextTick().then(cb)进行调用。
timerFunc看似实现关键,实则执行逻辑围绕Promise、MutationObserver、setImmediate与setTimeout(f(), 0)等方法展开。若系统支持Promise,则使用Promise执行延时;不支持Promise时,依次判断是否支持MutationObserver、setImmediate或setTimeout,选择合适的方法执行flushCallbacks函数。
flushCallbacks函数负责将pending状态设为false,并将callbacks数组复制至copies数组,清空callbacks。接着遍历copies数组,依次执行回调函数(即传入nextTick的cb函数)。至此,我们理解了nextTick的核心机制与使用场景。
MutationObserver:在源码阅读中,我们发现若系统不支持Promise,则使用MutationObserver作为替代方案。MutationObserver是监听DOM树变更的接口,其设计用于替代DOM3 Events规范中的Mutation Events功能。简单理解,MutationObserver用于监听DOM变动,当DOM发生任何更改时,它会接收到通知。
MutationObserver的使用方式如代码所示,实例化MutationObserver并指定回调函数与需要监控的DOM元素与变动类型。调用observer.observe(dom, options)方法进行观察。options对象中定义了需要观察的变动类型,如childList、attributes、characterData等。
下面通过一个简单的demo来理解MutationObserver。在运行该demo后,屏幕显示了,说明文本节点已添加至DOM中。然而,控制台打印的I值只有1,这意味着DOM变动只触发了一次。这表明MutationObserver在异步处理DOM变化,直到页面上所有DOM操作完成时执行一次,实现高效处理。
在nextTick中,MutationObserver用于触发flushCallbacks函数。通过文本节点的操作触发MutationObserver,从而执行flushCallbacks。至此,我们理解了nextTick的实现与MutationObserver的用法。
源码阅读让我们发现,nextTick并非传说中的神物,其主要应用场合与DOM操作相关。在遇到无法在DOM更新前操作DOM的情况时,可以考虑使用nextTick。由于nextTick在DOM更新循环结束后执行,因此在created钩子中操作DOM成为可能,实现目标。
Vue.nextTick原理分析
了解 Vue 的 nextTick 是如何实现的,首先需要回顾一下 JavaScript 的运行机制。
JavaScript 是单线程执行的,通过事件循环机制进行任务调度。具体流程如下:当执行栈为空时,检查微任务队列,执行全部微任务,之后执行宏任务队列中的事件。
在 JavaScript 中,常见的宏任务包括 setTimeout, MessageChannel, postMessage 和 setImmediate,而微任务则包括 MutationObserver 和 Promise.then。
Vue 的 nextTick 实现细节在 2.6. 版本后被单独封装在 src/core/util/next-tick.js 文件中,源码简洁,约 多行。其核心原理在于,同一 tick 内添加的任务会在下一个 tick 执行,避免创建多个异步任务。
当调用 nextTick 时不传入回调函数,会返回一个 Promise 化的调用,当内部 resolve 函数执行,即进入 then 的逻辑。
总结,nextTick 的实现和使用方法在源码分析后变得清晰。在 Vue 开发中,通过 nextTick 可以确保在数据响应变化后获取最新的 DOM 更新,避免了同步操作导致的渲染冲突问题。
Vue3之事件循环、nextTick与源码解析
事件循环是JavaScript单线程执行的核心机制,确保了同步任务与异步任务能有序执行。同步任务按顺序执行,而异步任务则分为宏任务和微任务。宏任务包括setTimeout、setInterval、整体代码、ajax、postMessage、交互事件等,微任务则包括Promise.then、catch、finally、MutationObserver、process.nextTick(Node环境下)。
事件循环机制确保了同步任务先执行,宏任务和微任务则交替执行,形成事件循环的周期。此过程确保了JavaScript代码的流畅执行,避免了因耗时任务阻塞主线程导致的卡顿。
在Vue3中,nextTick功能用于处理异步更新DOM问题。它允许开发者在DOM更新之前执行异步代码,确保DOM的正确渲染。有以下两种使用方式:一种是直接传入回调函数,另一种是通过async和await实现。当对数据进行操作后,如果观察到DOM没有更新,原因在于Vue3中数据响应式是同步的,而DOM更新是异步的。
为解决此问题,可以使用nextTick将同步代码转化为异步代码,确保在浏览器的下一次事件循环中执行DOM更新。在Vue3源代码中,nextTick通过将同步代码包装为Promise,从而转化为异步任务来实现这一功能。
Vue3将DOM更新设置为异步,旨在优化性能。考虑到大量数据变化时,频繁的DOM更新可能导致性能开销过大,异步更新策略降低了这种浪费,提高了应用的响应性和性能效率。
Vue.nextTick 的原理和用途
一、原理
Vue 实现响应式的策略是按一定的策略进行 DOM 的更新,而非数据变化立即导致 DOM 变化。Vue 在修改数据后,并不会立即更新视图,而是等到同一事件循环中的所有数据变化完成之后,再统一进行视图更新。这样的策略确保了 DOM 的更新与数据变化之间的一致性。
二、 Vue.nextTick 的机制
1、为什么用Vue.nextTick()
Vue.nextTick() 方法是 Vue 的核心方法之一,它允许你在 DOM 更新循环结束之后执行延迟回调,确保你获取到的是更新后的 DOM。通过 Vue.nextTick(),开发者可以在修改数据后立即调用它,从而在 DOM 更新后立即访问最新的 DOM 结构。
2、什么是Vue.nextTick()?
Vue.nextTick() 方法用于在下次 DOM 更新循环结束之后执行延迟回调。这样,当修改数据后立即调用 Vue.nextTick(),你可以在回调中访问到更新后的 DOM。
MutationObserver
MutationObserver 是 HTML5 中的一个 API,用于监视 DOM 的变化。调用 MutationObserver 需要先给它绑定回调函数,并得到 MutationObserver 实例。回调会在 MutationObserver 实例监听到 DOM 变动时触发。在这里,回调是在 microtask 中执行的。
源码浅析
Vue.nextTick() 的实现位于 src/core/util/next-tick.js 文件中,主要分为两部分:能力检测和根据能力检测选择执行回调队列的方式。
能力检测确保优先使用微任务执行,如果浏览器不支持微任务,则使用宏任务。Vue.nextTick() 的执行顺序依次为:Promise、MutationObserver、setImmediate、setTimeout。
对外暴露的 nextTick 函数在每次调用时执行回调,但不直接执行回调函数,而是确保同一 tick 内多次调用 nextTick 的回调都集中在同一个异步任务中,在下一个 tick 执行完毕。
附加
no 的定义如下。
三、怎么用
Vue.nextTick([callback, context])
参数说明:
Vue 实例方法 vm.$nextTick 做了封装,将 context 参数设置为当前 Vue 实例。
四、小结
Vue.nextTick() 的使用是为了获取更新后的 DOM。触发时机是在同一事件循环中的数据变化后,DOM 更新完成时立即执行回调。
同一事件循环中的代码执行完毕 -> DOM 更新 -> nextTick callback 触发
应用场景:
版本分析
在 Vue 2.6 版本中,优先使用 microtask 作为异步延迟包装器,方法实现相对简单。而在 Vue 2.5 版本中,nextTick 的实现是通过 microTimerFunc 和 macroTimerFunc 组合实现的,延迟调用优先级为:Promise > setImmediate > MessageChannel > setTimeout。具体的源码实现细节在相关版本中有所不同。
在 Vue 2.5 版本中,存在一些问题,如在重绘之前状态改变时的不一致(如 issue #)以及在事件处理程序中使用 macrotask 导致的不可预知行为(如 issue # 和 issue #)。
尽管 microtask 在某些情况下也可能存在问题,如在顺序事件(如 issue # 和 issue #)之间或在同一事件的冒泡过程中触发(issue #),但 Vue.nextTick() 依然提供了在 DOM 更新后访问最新 DOM 结构的便利。