vue源码nextTick使用及原理解析
前端  /  管理员 发布于 3年前   502
1 nextTick的使用
vue中dom的更像并不是实时的,当数据改变后,vue会把渲染watcher添加到异步队列,异步执行,同步代码执行完成后再统一修改dom,我们看下面的代码。
{{msg}}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() } }}当数据被引用时,如{{msg}} ,会执行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) { let _resolve // push进callbacks数组 callbacks.push(() => { cb.call(ctx) }) if (!pending) { pending = true // 执行timerFunc方法 timerFunc() }}timerFunc
let timerFunc// 判断是否原生支持Promiseif (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实验一下。如下面代码,验证了我们的想法。
{{msg}}
- 相关文章
- 使用 Alpine.js 排序插件对元素进行排序(0个评论)
- 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
- 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
- 使用mock-server实现模拟接口对接流程步骤(0个评论)
- vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
- 近期文章
- 程序员兼职引起纠纷之如何安全兼职?(0个评论)
- go + websocket实现即时通信之私聊/群聊功能示例(0个评论)
- go + websocket实现并发下载文件及中途取消下载功能示例(0个评论)
- Laravel 11.7版本发布-适用于MySQL的Rule::array()和whereJsonOverlaps()(0个评论)
- 在go+ gin框架中使用gomail.v2实现邮件通知功能(0个评论)
- 在PHP中使用array_pop + yield实现读取超大型目录功能示例(0个评论)
- Energy GUI桌面应用开发之js和go之间交互示例(0个评论)
- 在go语言中gin + gorm多表关联实现一个店铺商品搜索功能示例(0个评论)
- 在go语言中gin + gorm实现一个店铺关注/取消关注的功能示例(0个评论)
- 2024年五一假期安排和今年的重要事件回顾(0个评论)
- 近期评论
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..
Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号