vue源码nextTick使⽤及原理解析
1 nextTick的使⽤
vue中dom的更像并不是实时的，当数据改变后，vue会把渲染watcher添加到异步队列，异步执⾏，同步代码执⾏完成后再统⼀修改dom，我们看下⾯的代码。<template>
<div class="box">{{msg}}</div>
</template>
export default {
name: 'index',
data () {
return {
msg: 'hello'
}
},
mounted () {
this.msg = 'world'
let box = ElementsByClassName('box')[0]
console.log(box.innerHTML) // hello
}
}
可以看到，修改数据后并不会⽴即更新dom ，dom的更新是异步的，⽆法通过同步代码获取，需要使⽤nextTick，在下⼀次事件循环中获取。
this.msg = 'world'
let box = ElementsByClassName('box')[0]
this.$nextTick(() => {
console.log(box.innerHTML) // world
})
如果我们需要获取数据更新后的dom信息，⽐如动态获取宽⾼、位置信息等，需要使⽤nextTick。
2 数据变化dom更新与nextTick的原理分析
2.1 数据变化
vue双向数据绑定依赖于ES5的Object.defineProperty，在数据初始化的时候，通过Object.defineProperty为每⼀个属性创建getter与setter，把数据变成响应式数据。对属性值进⾏修改操作时，如this.msg = world，实际上会触发setter。下⾯看源码，为⽅便越读，源码有删减。
双向数据绑定
数据改变触发set函数
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
// 数据修改后触发set函数经过⼀系列操作完成dom更新
set: function reactiveSetter (newVal) {
const value = getter ? getter.call(obj) : val
vue中reactiveif (getter && !setter) return
setter.call(obj, newVal)
} else {
val = newVal
}
childOb = !shallow && observe(newVal)
}
})
执⾏ify⽅法
export default class Dep {
constructor () {
this.id = uid++
this.subs = []
}
notify () {
const subs = this.subs.slice()
for (let i = 0, l = subs.length; i < l; i++) {
// 实际上遍历执⾏了subs数组中元素的update⽅法
subs[i].update()
}
}
}
当数据被引⽤时，如<div>{{msg}}</div> ，会执⾏get⽅法，并向subs数组中添加渲染Watcher，当数据被改变时执⾏Watcher的update⽅法执⾏数据更新。
update () {
/* istanbul ignore else */
if (this.lazy) {
this.dirty = true
} else if (this.sync) {
this.run()
} else {
queueWatcher(this) //执⾏queueWatcher
}
}
update ⽅法最终执⾏queueWatcher
function queueWatcher (watcher: Watcher) {
const id = watcher.id
if (has[id] == null) {
has[id] = true
if (!flushing) {
queue.push(watcher)
} else {
// if already flushing, splice the watcher based on its id
// if already past its id, it will be run next immediately.
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {
i--
}
queue.splice(i + 1, 0, watcher)
}
/
/ queue the flush
if (!waiting) {
// 通过waiting 保证nextTick只执⾏⼀次
waiting = true
// 最终queueWatcher ⽅法会把flushSchedulerQueue 传⼊到nextTick中执⾏
nextTick(flushSchedulerQueue)
}
}
}
执⾏flushSchedulerQueue⽅法
function flushSchedulerQueue () {
currentFlushTimestamp = getNow()
flushing = true
let watcher, id
...
for (index = 0; index < queue.length; index++) {
watcher = queue[index]
if (watcher.before) {
watcher.before()
}
id = watcher.id
has[id] = null
/
/ 遍历执⾏渲染watcher的run⽅法完成视图更新
watcher.run()
}
// 重置waiting变量
resetSchedulerState()
...
}
也就是说当数据变化最终会把flushSchedulerQueue传⼊到nextTick中执⾏flushSchedulerQueue函数会遍历执⾏watcher.run()⽅法，watcher.run()⽅法最终会完成视图更新，接下来我们看关键的nextTick⽅法到底是啥
2.2 nextTick
nextTick⽅法会被传进来的回调push进callbacks数组，然后执⾏timerFunc⽅法
export function nextTick (cb?: Function, ctx?: Object) {
// push进callbacks数组
callbacks.push(() => {
cb.call(ctx)
})
if (!pending) {
pending = true
// 执⾏timerFunc⽅法
timerFunc()
}
}
timerFunc
let timerFunc
// 判断是否原⽣⽀持Promise
if (typeof Promise !== 'undefined' && isNative(Promise)) {
const p = solve()
timerFunc = () => {
// 如果原⽣⽀持Promise ⽤Promise执⾏flushCallbacks
p.then(flushCallbacks)
if (isIOS) setTimeout(noop)
}
isUsingMicroTask = true
/
/ 判断是否原⽣⽀持MutationObserver
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
// PhantomJS and iOS 7.x
)) {
let counter = 1
// 如果原⽣⽀持MutationObserver ⽤MutationObserver执⾏flushCallbacks
const observer = new MutationObserver(flushCallbacks)
const textNode = ateTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
isUsingMicroTask = true
// 判断是否原⽣⽀持setImmediate
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
timerFunc = () => {
// 如果原⽣⽀持setImmediate ⽤setImmediate执⾏flushCallbacks
setImmediate(flushCallbacks)
}
// 都不⽀持的情况下使⽤setTimeout 0
} else {
timerFunc = () => {
// 使⽤setTimeout执⾏flushCallbacks
setTimeout(flushCallbacks, 0)
}
}
// flushCallbacks 最终执⾏nextTick ⽅法传进来的回调函数
function flushCallbacks () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
nextTick会优先使⽤microTask, 其次是macroTask 。
也就是说nextTick中的任务，实际上会异步执⾏，nextTick(callback)类似于
也就是说vue的视图更新 nextTick(flushSchedulerQueue)等同于setTimeout(flushSchedulerQueue, 0)，会异步执⾏flushSchedulerQueue函数，所以我们在this.msg = hello 并不会⽴即更新dom。
要想在dom更新后读取dom信息，我们需要在本次异步任务创建之后创建⼀个异步任务。
异步队列
为了验证这个想法我们不⽤nextTick，直接⽤setTimeout实验⼀下。如下⾯代码，验证了我们的想法。
<template>
<div class="box">{{msg}}</div>
</template>
<script>
export default {
name: 'index',
data () {
return {
msg: 'hello'
}
},
mounted () {
this.msg = 'world'
let box = ElementsByClassName('box')[0]
setTimeout(() => {
console.log(box.innerHTML) // world
})
}
}
如果我们在数据修改前nextTick ，那么我们添加的异步任务会在渲染的异步任务之前执⾏，拿不到更新后的dom。
<template>
<div class="box">{{msg}}</div>
</template>
<script>
export default {
name: 'index',
data () {
return {
msg: 'hello'
}
},
mounted () {
this.$nextTick(() => {
console.log(box.innerHTML) // hello
})
this.msg = 'world'
let box = ElementsByClassName('box')[0]
}
}
3 总结
vue为了保证性能，会把dom修改添加到异步任务，所有同步代码执⾏完成后再统⼀修改dom，⼀次事
件循环中的多次数据修改只会触发⼀次watcher.run()。也就是通过nextTick，nextTick会优先使⽤microTask创建异步任务。
vue项⽬中如果需要获取修改后的dom信息，需要通过nextTick在dom更新任务之后创建⼀个异步任务。如官⽹所说，nextTick会在下次 DOM 更新循环结束之后执⾏延迟回调。
参考⽂章
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。