如何使用vue中的nextTick

Dax 等级 550 0 0

其实这个问题主要就是针对Vue的异步更新队列的理解,因为我们平时用的也比较少,所以很多时候都会忽略掉,但是如果我们在面试当中能比较详细的解答这个问题,那么我相信这应该会是一个闪光点,那话不多说,我们先来捋一下答题思路:

答题思路: nextTick是什么?先来一个定义 为什么需要他呢?异步更新队列实现原理解释 什么地方使用到他呢?描述使用的场景 如何使用他呢?描述使用的具体方法 说一说源码中是怎么实现他的?扩展更深层次源码实现

我们先来看下官方的定义: Vue.nextTick([callback, context]) 定义:在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新之后的DOM1// 修改数据 2vm.msg = 'Hello' 3// DOM 还没有更新 4Vue.nextTick(function () { 5 // DOM 更新了 6})

看完官方的定义,感觉唯一清楚了这个API应该是在修改数据之后立即使用他,其余的感觉还是不太明白,那接下来我们就从实际的案例来看看: 1 2

4 5 6 7 8 Vue面试 9

11 12

13

nextTick的使用

14

{{name}}

** 15 <button @click="changeName">按钮** 16
** 17 36

38

我们可以从上面的案例代码看出,在两个不同的时机输出的结果是不一样的,那为什么会出现这样的情况呢?这个时候我们就需要看看Vue的异步更新策略了,看官网定义: 图片

看到这个官网的异步更新策略我们应该比较容易理解,更新DOM是异步的,侦听到数据变化之后不是立即去改变渲染DOM,而是开启一个队列缓冲在同一个事件循环中发生的所有数据变更,一个Watcher触发多次也只推入队列一次。

那我们是否想过为什么需要这个异步更新策略呢?我们来看一个实际的🌰:

Vue面试

nextTick的使用

{{count}}

我们来看这个地方,如果说Vue没有使用异步更新策略,那我们在调用addCount函数的时候,每循环一次count就要加一,那么每一次都要去执行一遍setter->Dep->Watcher->update->patch这个流程,也就意味着每次加一都要更新一下视图,这明显就不合理,重复的工作极大的消耗了浏览器的性能,所以这就是异步更新策略的必要性了

我们知道了异步更新的必要性,那我们在平时工作中有的时候就有一类需求比如需要在DOM更新之后立马就进行某项操作,那么这个时候nextTick这个API不就用上了吗?现在理解官方定义的前一句话了吧:DOM更新循环结束之后执行延迟回调

前面我们分析了nextTick的定义,必要性以及使用场景等等,接下来我们就升级一下,让我们的答案变得更加有深度,看看源码中nextTick的实现: 源码地址:src/core/util/next-tick.js 在Vue2.x的源码中,这个nextTick部分都是专门单独一个文件的,我们分部分来看 图片

这部分的代码其实并不难理解,在callbacks里面加入我们传入的异步执行的函数,然后使用timerFunc异步方式来调用它们,好了,这里我们发现出现了一个新的名词:timerFunc——异步调用方式,这是什么呢?我们继续看源码文件

图片 看这段源码我们就知道了,timerFunc就是通过检测当前环境的不同来使用不同的实现方式,我们看这个if代码块,发现其实就是按照Promise——>MutationsObserver——>setImmediate——>setTimeout的优先级顺序来实现的,那为什么要按照这个顺序呢?

其实我们应该知道前两者Promise和MutationsObserver的回调函数都会在microtask中执行,它们会比后两者macrotask先执行,所以优先考虑前两者的实现,除非所处环境不支持,最后才会降级成最后的setTimeout

图片

最后一部分源码也贴上,我们去调试可以知道,其实这就是我们在项目中调用的nextTick函数,这里就不过多解释了。

OK,到这里我们今天要分析的Vue中的nextTick有关问题我们就看的差不多了,最后我们来一个比较完整的回答总结: nextTick是Vue提供的一个全局API,由于Vue的异步更新策略导致对数据的修改不会立即体现在DOM变化上,此时如果我们需要立即获取到变化后的DOM的状态,就需要使用这个API(定义+使用场景) Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。nextTick方法会在队列中加入一个回调函数,确保该函数在前面的DOM操作完成之后再调用(必要性) 在callbacks里面加入我们传入的函数,然后用timerFunc的异步方式调用它们,首选是Promise方式(源码层面剖析)

收藏
评论区

相关推荐

Vue2全家桶之一:vue-cli(vue脚手架)超详细教程
这是我第4篇简书。   都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前用jq随便拿全局变量和修改dom的锤子不能用了,vue只用关心数据本身,不用再频繁繁琐的操作dom,注册事件、监听事件、取消事件。。。。(确实很烦)。vue的官方文档还是不错的,由浅到深,如果不使用
Vue 组件通信方式及其应用场景总结
前言 相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其实际工作中的应用场景 首先我们带着这些问题去思考 1 vue中到底有多少种父子组件通信方式? 2 vue中那种父子组件最佳通信方式是什么? 3
Vue 项目性能优化—实践指南
Vue 项目性能优化—实践指南 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效
如何使用vue中的nextTick
其实这个问题主要就是针对Vue的异步更新队列的理解,因为我们平时用的也比较少,所以很多时候都会忽略掉,但是如果我们在面试当中能比较详细的解答这个问题,那么我相信这应该会是一个闪光点,那话不多说,我们先来捋一下答题思路:答题思路:nextTick是什么?先来一个定义为什么需要他呢?异步更新队列实现原理解释什么地方使用到他呢?描述使用的场景如何使用他呢?描述使用
Vue面试考点准备02
10\. 谈谈你对keepalive的理解是什么? keepalive是Vue提供的一个抽象组件,用来对组件进行缓存,当组件切换时不会进行销毁,从而节省性能。由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素。1)include定义缓存白名单,keepalive会缓存命中的组件;2)exclude定义缓存黑名单
面试官问 Vue 性能优化,我该怎么回答
前言Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过
全面解析vue中的nextTick
为什么要用nextTick请看如下一段代码new Vue({ el: 'app', data: { list: }, mounted: function () { this.get() }, methods: { get: function () { this.$http.get('/api/a
前端面试系列——Vue面试题
Vue 双向绑定原理 mvvm 双向绑定,采用数据劫持结合发布者订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调。 双
Vue面试题
1、Vue的生命周期?beforeCreate 、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed(创建、挂载、更新、卸载)挂载中可以操作DOM,创建中不能操作DOM;常用挂载或者创建生命周期就行了2、methods和computed的区别?
Vue进阶(四十七):面试必备:2021 Vue经典面试题总结(含答案)_IT全栈 华强工作室
面试必备:2021 Vue经典面试题总结(含答案)一、什么是MVVM?
Vue 性能优化
前言Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过实际
Vue - diff 算法
diff是什么?diff就是比较两棵树,render会生成两颗树,一棵新树newVnode,一棵旧树oldVnode,然后两棵树进行对比更新找差异就是diff,全称difference,在vue里面 diff 算法是通过patch函数来完成的,所以有的时候也叫patch算法⏳ diff 发生的时机diff发生在什么时候呢?当然我们可以说在数据更新的时候发生d
前端培训-Vue专题之Vue基础
简介特点:MVVM框架,双向绑定,数据驱动,单页面,组件化。 区别Vue 和 jQuery 的区别:不直接操作DOM,而是操作数据。案例:Hello World 你好,世界HTML代码:xml<h1msg</h1jQuery实现javascript$("h1").text("你好,世界");Vue 实现javascriptthis.msg '你好,世界'
nextTick原理解析
nextTick 是什么\$nextTick:根据官方文档的解释,它可以在 DOM 更新完毕之后执行一个回调函数,并返回一个 Promise(如果支持的话)js// 修改数据vm.msg "Hello";// DOM 还没有更新Vue.nextTick(function() // DOM 更新了);这块理解 EventLoop 的应该一看就懂,其实就是
vue项目无配置文件解决方案
问题在开发vue项目时,需要重新设置项目的启动端口,发现项目目录中并没有相关的配置文件【config目录】vue脚手架版本【通过vue version查询】:@vue/cli 4.5.13解决方案在vue项目根目录下创建vue.config.js配置文件vue.config.jsmodule.exports devServer: d