Vue nextTick的原理解析

使用过Vue的小伙伴们都知道，Vue里的nextTick可以获取到更新后的DOM, 今天我就来讲解下nextTick里面究竟做了什么？

开始讲解前，我们需要知道了解一个概念，那就是Event Loop

Event Loop

Event Loop翻译过来就是事件循环, 一个Event Loop会包括一个或多个task队列，持续线程会从队列中取出最早进入队列的任务进行执行，被取出的任务就叫做macroTask(宏任务), 每个macroTask都有一个任务源, 每个macroTask处理完之后就从队列中取出下一个时间最早进入的macroTask再重执行

任务源：

```
    1. script
    2. 事件
    3. Dom交互
    4. I/O
    5. UI Render
    6. setTimeout
    7. setInterval
    8. requestAnimationFrame
    .....
```

也就是说碰到以上几种情况就会产生一个macroTask并且推入到队列中

miscroTask(微任务)

执行完每个macroTask之后，主线程会去检查该macroTask下的microTask是否为空，如果不为空，则按照时间顺序从早到晚取出，如果途中有遇到新的microTask, 那么会继续将该microTask推入到microTask队列里

UI Render(重点)

伴随着miscroTask队列的清空，主线程就会执行UI Render, 也就是渲染界面，但是浏览器它并不会每次在UI Render任务下一定会渲染界面，视情况而言，现在主流浏览器一般都是按照60HZ 也就是16.7ms刷新频率进行渲染(不是精确估量)，一个macroTask通常是小于16.7ms, 所以浏览器每次会根据情况进行渲染

总结下一个循环

1. 从macroTask队列里取出最早添加进去的
2. 开始执行task, 途中如果遇到新的macroTask，就会将其添加到macroTask队列的最后面
3. 执行完macroTask之后，event loop会去寻找microTask队列
4. 同样的道理，如果途中遇到新的microTask，将其放入该macroTask下的microTask队列最后面
5. 执行完microTask，会执行UI Render macroTask
6. 浏览器会根据现有情况决定是否更新DOM，通常是按照60HZ的频率去更新
7. 至此，一个event loop结束了

nextTick

我们开始分析nextTick

根据上图
我们看到nextTick的几种写法:

    1. this.$nextTick(cb)
    2. this.$nextTick().then(cb)

所有的cb都会被放入到callbacks数组里，等待一次性调用
上图中我们看到了主要是由timerFunc这个函数来进行调用回调, 那么我们下面来着重介绍这个函数，首先看下源码

我们可以看到timerFunc在不同情况下不同的赋值情况

首先会判断浏览器是否支持promise属性, 如果支持, timerFunc就会被赋值成Promise， 这里有个小小的问题，那就是在ios下，虽然是具备Pormise对象，并且会将它推入到microTask队列里，但是队列却不会更新，这个时候需要添加一个macroTask来强制刷新microTask队列

MutationObserver, 相信很多人并不清楚这个Api, 这是一个能够监听DOM变化的API，并且属于microTask, 优先级低于Promise 在创建一个新的文本节点后，手动更改其文本节点来触发microTask,

这里会有个小小的问题：

该文本节点渲染成功后,一定能代表其他的DOM渲染成功了吗？

这是个备选方案, 主要还是因为它是一个微任务，所以才使用它，并不是因为它监听了DOM

微任务都失败后， 退而求其次，选择setImmediate, 这是一个只有高版本IE和Edge浏览器才可能拥有的API, 其主要是用于计算大量数据的时候使用

最后就是setTimeout

看到这里，你会不会有疑惑？

上面的代码并没有说明nextTick是在监听DOM更新后才执行的？ What????当时脑袋就duang了一下

那么接下来说的就是重中之重

DOM Tree的更新是实时的，DOM Tree的更新是实时的，DOM Tree的更新是实时的， 重要的事说3遍， 这意味着你无需去监听DOM 更新， 你对DOM的操作是能够实时得到反馈的，上一行代码操作了DOM，下一行就能获取到

那么有人就会产生疑惑了， nextTick究竟是干嘛的?

nextTick的作用是将收集Watcher从队列中一个个取出，并且更改数据，来一次性渲染DOM, 我们知道操作DOM的代价是昂贵的， 浏览器打开一个网页后会开启一个进程，进程是由线程组成的，

1. GUI渲染线程
2. js引擎线程(主线程)
3. EventLoop轮训处理线程
4. 其他线程，例如网络

跨线程操作代价是昂贵的，所以做到一次性渲染Dom,可以有效的优化性能！！

总结

nextTick并不是用来监听DOM变更，因为DOM变更是能够实时获取到的，它的作用是一次性更改数据，并且渲染DOM

以上就是Vue nextTick的原理解析的详细内容，更多关于Vue nextTick的原理的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Vue中this.$nextTick的作用及用法

    Vue中this.$nextTick的作用及用法

    Vue实现响应式后DOM的变化 data对象中数据改变是如何追踪的? vue将遍历data对象中所有的属性,并通过 Object.defineProperty 把这些属性全部转为 getter/setter:但是我们是没有办法看到 getter/setter的,但是在内部它们让 Vue 能够追踪依赖,在属性被访问和修改时通知变更. 每个组件都对应一个 watcher 实例,它会在组件渲染的过程中把"接触"过的数据属性记录为依赖.之后当依赖项的 setter 触发时,会通知 watche

  • Vue.js原理分析之nextTick实现详解

    前言 tips:第一次发技术文章,篇幅比较简短,主要采取文字和关键代码表现的形式,希望帮助到大家.(若有不正确还请多多指正) nextTick作用和用法 用法:nextTick接收一个回调函数作为参数,它的作用是将回调延迟到下一次DOM更新之后执行,如果没有提供回调函数参数且在支持Promise的环境中,nextTick将返回一个Promise. 适用场景:开发过程中,开发者需要在更新完数据之后,需要对新DOM做一些操作,其实我们当时无法对新DOM进行操作,因为这时候还没有重新渲染,这时候nex

  • 浅析vue中的nextTick

    浅析vue中的nextTick

    背景 vue是异步渲染的,当data改变之后,DOM不会立刻被渲染,页面渲染时会将data的修改做整合,多次data修改只会做整合最后一次性渲染出来,这也是异步渲染的原因.只有异步渲染才可以实现整合操作. 例子 methods: { update() { for (let i = 0; i < 10; i++) { this.testNum = this.testNum + i; } }, }, 在你的 Vue 视图中, testNum 会发生变化.不过需要注意的是这个变化的过程,虽然我们把 f

  • Vue中的nextTick作用和几个简单的使用场景

    Vue中的nextTick作用和几个简单的使用场景

    目的 理解下 nextTick 的作用和几个简单的使用场景 正文 起什么作用? 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 我想各位都知道或了解 Vue 的渲染流程,Vue 在监听到数据变化后会重新渲染,配合 VDOM 更新真实的 DOM,而 nextTick 的触发时机就是在调用方法后的第一次重新渲染完毕后. 如何使用? 有两种使用方法,一种是传入回调,另一种是 Promise,官方使用示例如下: // 修改数据 vm.msg = 'H

  • 详解vue中$nextTick和$forceUpdate的用法

    详解vue中$nextTick和$forceUpdate的用法

    1.$nextTick vm.$nextTick( [callback] ) this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行,在修改数据之后立即使用它,然后等待 DOM 更新.它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上. 应用场景: 1. 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中. 2. 因为在created()钩子函数执行的时候DOM 其实并未

  • 深入学习Vue nextTick的用法及原理

    深入学习Vue nextTick的用法及原理

    Vue.nextTick是Vue官方给我们提供的一个API(方法),作用是在下次DOM更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM: 那么我们的理解是:当数据发生变化之后,DOM视图并不会立即更新,如果我们在发生变化之后立马去获取某个节点或者某个节点的值,很有可能结果就是undefined:因为Vue实现响应式并不是数据发生变化之后DOM立即变化,而是按一定的策略进行DOM的更新: 来看一个小demo: App.vue <template> <div

  • vue中nextTick用法实例

    什么是Vue.nextTick() 官方文档解释如下: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 我理解的官方文档的这句话的侧重点在最后那半句获取更新后的DOM,获取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出问题,所以就衍生出了这个获取更新后的DOM的Vue方法.所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码,比如Swiper扩展

  • 全面解析Vue中的$nextTick

    当在代码中更新了数据,并希望等到对应的Dom更新之后,再执行一些逻辑.这时,我们就会用到$nextTick funcion callback(){ //等待Dom更新,然后搞点事. } $nextTick(callback): 官方文档对nextTick的解释是: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 那么,Vue是如何做的这一点的,是不是在调用修改Dom的Api之后(appendChild, textContent = "xxxx

  • vue源码nextTick使用及原理解析

    vue源码nextTick使用及原理解析

    1 nextTick的使用 vue中dom的更像并不是实时的,当数据改变后,vue会把渲染watcher添加到异步队列,异步执行,同步代码执行完成后再统一修改dom,我们看下面的代码. <template> <div class="box">{{msg}}</div> </template> export default { name: 'index', data () { return { msg: 'hello' } }, mount

  • VUE异步更新DOM - 用$nextTick解决DOM视图的问题

    VUE异步更新DOM 首先,Vue 在更新 DOM 时是异步执行的! 所以只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更.如果同一个 watcher 被多次触发,只会被推入到队列中一次.这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的.然后,在下一个的事件循环"tick"中,Vue 刷新队列并执行实际 (已去重的) 工作.Vue 在内部对异步队列尝试使用原生的 Promise.then.MutationObserver 和

随机推荐