摘要:对属性值进行修改操作时,如,实际上会触发。下面看源码,为方便越读,源码有删减。总结为了保证性能,会把修改添加到异步任务,所有同步代码执行完成后再统一修改,一次事件循环中的多次数据修改只会触发一次。
1 nextTick的使用
vue中dom的更像并不是实时的,当数据改变后,vue会把渲染watcher添加到异步队列,异步执行,同步代码执行完成后再统一修改dom,我们看下面的代码。
export default {
name: "index",
data () {
return {
msg: "hello"
}
},
mounted () {
this.msg = "world"
let box = document.getElementsByClassName("box")[0]
console.log(box.innerHTML) // hello
}
}
可以看到,修改数据后并不会立即更新dom ,dom的更新是异步的,无法通过同步代码获取,需要使用nextTick,在下一次事件循环中获取。
this.msg = "world"
let box = document.getElementsByClassName("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
if (getter && !setter) return
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
childOb = !shallow && observe(newVal)
dep.notify() // 执行dep notify方法
}
})
执行dep.notify方法
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()
}
}
}
当数据被引用时,如
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 nextTicknextTick方法会被传进来的回调push进callbacks数组,然后执行timerFunc方法
export function nextTick (cb?: Function, ctx?: Object) {
let _resolve
// 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 = Promise.resolve()
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
MutationObserver.toString() === "[object MutationObserverConstructor]"
)) {
let counter = 1
// 如果原生支持MutationObserver 用MutationObserver执行flushCallbacks
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
// 判断是否原生支持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)类似于
Promise.resolve().then(callback),或者setTimeout(callback, 0)。
也就是说vue的视图更新 nextTick(flushSchedulerQueue)等同于setTimeout(flushSchedulerQueue, 0),会异步执行flushSchedulerQueue函数,所以我们在this.msg = hello 并不会立即更新dom。
要想在dom更新后读取dom信息,我们需要在本次异步任务创建之后创建一个异步任务。
为了验证这个想法我们不用nextTick,直接用setTimeout实验一下。如下面代码,验证了我们的想法。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/106696.html
摘要:源码在下用法在下次更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的。 源码在src/core/util/next-tick.js下 用法 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。 // 修改数据 vm.msg = Hello // DOM 还没有更新 Vue.nextTick(function () ...
摘要:用于延迟执行一段代码,它接受个参数回调函数和执行回调函数的上下文环境,如果没有提供回调函数,那么将返回对象。 instance/index.js function Vue (options) { if (process.env.NODE_ENV !== production && !(this instanceof Vue) ) { warn(Vue is a ...
摘要:源码版本构造器实例选项让我们用一段展示一下这三个概念其中的构造器实例实例名可以任意取,这里我们便于理解保持和文档一致选项即为传入构造器里的配置选项。其实构造器上也绑了不少好用的方法。 源码版本:2.0.5 构造器、实例、选项 让我们用一段demo展示一下这三个概念: //HTML {{ message }} //JS var vm = new Vue({ el: #app,...
摘要:哪吒别人的看法都是狗屁,你是谁只有你自己说了才算,这是爹教我的道理。哪吒去他个鸟命我命由我,不由天是魔是仙,我自己决定哪吒白白搭上一条人命,你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运,我不晓得。我只晓得,不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处 查看github最新的Vue...
摘要:本篇文章主要是对中的异步更新策略和机制的解析,需要读者有一定的使用经验并且熟悉掌握事件循环模型。这个结果足以说明中的更新并非同步。二是把回调函数放入一个队列,等待适当的时机执行。通过的主动来触发的事件,进而把回调函数作为参与事件循环。 本篇文章主要是对Vue中的DOM异步更新策略和nextTick机制的解析,需要读者有一定的Vue使用经验并且熟悉掌握JavaScript事件循环模型。 ...
阅读 2615·2021-10-12 10:11
阅读 1372·2021-10-11 10:58
阅读 3434·2019-08-30 15:54
阅读 869·2019-08-30 13:59
阅读 803·2019-08-29 13:07
阅读 1553·2019-08-26 11:55
阅读 2287·2019-08-26 10:44
阅读 2856·2019-08-23 18:25