$nextTick有什么作用?

$nextTick有什么作用?

一、NextTick是什么

为什么要有nexttick

二、使用场景

三、实现原理

$nextTick有什么作用?

一、NextTick是什么

官方对其的定义

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM

什么意思呢?

我们可以理解成,Vue 在更新 DOM 时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新

举例一下

Html结构

1<div id="app"> {{ message }} </div>

构建一个vue实例

1const vm = new Vue({
2  el: '#app',
3  data: {
4    message: '原始值'
5  }
6})

修改message

1this.message = '修改后的值1'
2this.message = '修改后的值2'
3this.message = '修改后的值3'

这时候想获取页面最新的DOM节点,却发现获取到的是旧值

1console.log(vm.$el.textContent) // 原始值

这是因为message数据在发现变化的时候,vue并不会立刻去更新Dom,而是将修改数据的操作放在了一个异步操作队列中

如果我们一直修改相同数据,异步操作队列还会进行去重

等待同一事件循环中的所有数据变化完成之后,会将队列中的事件拿来进行处理,进行DOM的更新

为什么要有nexttick

举个例子

1{{num}}
2for(let i=0; i<100000; i++){
3    num = i
4}

如果没有 nextTick 更新机制,那么 num 每次更新值都会触发视图更新(上面这段代码也就是会更新10万次视图),有了nextTick机制,只需要更新一次,所以nextTick本质是一种优化策略

二、使用场景

如果想要在修改数据后立刻得到更新后的DOM结构,可以使用Vue.nextTick()

第一个参数为:回调函数(可以获取最近的DOM结构)

第二个参数为:执行函数上下文

1// 修改数据
2vm.message = '修改后的值'
3// DOM 还没有更新
4console.log(vm.$el.textContent) // 原始的值
5Vue.nextTick(function () {
6  // DOM 更新了
7  console.log(vm.$el.textContent) // 修改后的值
8})

组件内使用 vm.$nextTick() 实例方法只需要通过this.$nextTick(),并且回调函数中的 this 将自动绑定到当前的 Vue 实例上

1this.message = '修改后的值'
2console.log(this.$el.textContent) // => '原始的值'
3this.$nextTick(function () {
4    console.log(this.$el.textContent) // => '修改后的值'
5})

$nextTick() 会返回一个 Promise 对象,可以是用async/await完成相同作用的事情

1this.message = '修改后的值'
2console.log(this.$el.textContent) // => '原始的值'
3await this.$nextTick()
4console.log(this.$el.textContent) // => '修改后的值'

三、实现原理

源码位置:/src/core/util/next-tick.js

callbacks也就是异步操作队列

callbacks新增回调函数后又执行了timerFunc函数,pending是用来标识同一个时间只能执行一次

1export function nextTick(cb?: Function, ctx?: Object) {
2  let _resolve;
3
4  // cb 回调函数会经统一处理压入 callbacks 数组
5  callbacks.push(() => {
6    if (cb) {
7      // 给 cb 回调函数执行加上了 try-catch 错误处理
8      try {
9        cb.call(ctx);
10      } catch (e) {
11        handleError(e, ctx, 'nextTick');
12      }
13    } else if (_resolve) {
14      _resolve(ctx);
15    }
16  });
17
18  // 执行异步延迟函数 timerFunc
19  if (!pending) {
20    pending = true;
21    timerFunc();
22  }
23
24  // 当 nextTick 没有传入函数参数的时候,返回一个 Promise 化的调用
25  if (!cb && typeof Promise !== 'undefined') {
26    return new Promise(resolve => {
27      _resolve = resolve;
28    });
29  }
30}

timerFunc函数定义,这里是根据当前环境支持什么方法则确定调用哪个,分别有:

Promise.then`、`MutationObserver`、`setImmediate`、`setTimeout

通过上面任意一种方法,进行降级操作

1export let isUsingMicroTask = false
2if (typeof Promise !== 'undefined' && isNative(Promise)) {
3  //判断1:是否原生支持Promise
4  const p = Promise.resolve()
5  timerFunc = () => {
6    p.then(flushCallbacks)
7    if (isIOS) setTimeout(noop)
8  }
9  isUsingMicroTask = true
10} else if (!isIE && typeof MutationObserver !== 'undefined' && (
11  isNative(MutationObserver) ||
12  MutationObserver.toString() === '[object MutationObserverConstructor]'
13)) {
14  //判断2:是否原生支持MutationObserver
15  let counter = 1
16  const observer = new MutationObserver(flushCallbacks)
17  const textNode = document.createTextNode(String(counter))
18  observer.observe(textNode, {
19    characterData: true
20  })
21  timerFunc = () => {
22    counter = (counter + 1) % 2
23    textNode.data = String(counter)
24  }
25  isUsingMicroTask = true
26} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
27  //判断3:是否原生支持setImmediate
28  timerFunc = () => {
29    setImmediate(flushCallbacks)
30  }
31} else {
32  //判断4:上面都不行,直接用setTimeout
33  timerFunc = () => {
34    setTimeout(flushCallbacks, 0)
35  }
36}

无论是微任务还是宏任务,都会放到flushCallbacks使用

这里将callbacks里面的函数复制一份,同时callbacks置空

依次执行callbacks里面的函数

1function flushCallbacks () {
2  pending = false
3  const copies = callbacks.slice(0)
4  callbacks.length = 0
5  for (let i = 0; i < copies.length; i++) {
6    copies[i]()
7  }
8}

小结:

  1. 把回调函数放入callbacks等待执行

  2. 将执行函数放到微任务或者宏任务中

  3. 事件循环到了微任务或者宏任务,执行函数依次执行callbacks中的回调

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/699944.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux基础知识——命令行模式下命令的执行

文章目录 Linux基础知识——命令行模式下命令的执行开始执行Linux命令Linux基础命令的操作常用Linux命令行操作按键Linux输出错误信息查看 Linux系统在线帮助--help选项man命令info命令其他有用的文件文档百度搜索 文本编辑器&#xff1a;nanonano启动&#xff01; 正确关机方法…

__proto__和protype的区别

概述&#xff1a; prototype 函数静态属性&#xff0c;非实例属性,所有实例都可以继承它 __proto__ 实例属性&#xff0c;指向实例的原型对象&#xff0c;原型对象包括构造函数和protype属性 替代 现代浏览器中可以使用Object.getPrototypeOf()来替代__proto__来获取原型对象 …

Vue3自定义组件v-model双向绑定

无能吐槽一下&#xff0c;虽然用了很多遍v-model&#xff0c;但是还是不得要领&#xff0c;每次看官网都感觉说的不是很清晰&#xff0c;在写的时候还是要查看文档&#xff0c;可能就是不理解原理&#xff0c;这次特意好好写一篇文章&#xff0c;让自己好好理解一下。 自定义一…

单线程传奇Redis,为何引入多线程?

大家都知道 Redis 的速度非常的快&#xff0c;这其中一个关键原因就是它采用了单线程模型&#xff0c;这也是它的一大独特之处。那么问题来了&#xff0c;既然单线程模型已经如此出色&#xff0c;为什么后续版本还要搞上多线程呢&#xff1f; 本文主要分析一下多线程在Redis中的…

推出新款H7-TOOL 2024版,同时发布新版固件V2.25(2024-02-24)

H7-TOOL 2024版介绍 1、开模定制外壳&#xff0c;取消了侧面的IO接口&#xff0c;汇集到一个主端口&#xff08;2 * 17P排针&#xff09;。 2、显示屏升级为2.8寸&#xff08;分辨率320*240)。 3、两个按键升级为4个按键&#xff1a;上键、下键&#xff0c;OK确认键和C取消键。…

【大数据】Flink 内存管理(二):JobManager 内存分配(含实际计算案例)

Flink 内存管理&#xff08;二&#xff09;&#xff1a;JobManager 内存分配 1.分配 Total Process Size2.分配 Total Flink Size3.单独分配 Heap Size4.分配 Total Process Size 和 Heap Size5.分配 Total Flink Size 和 Heap Size JobManager 是 Flink 集群的控制元素。它由三…

【经验分享】分类算法与聚类算法有什么区别?白话讲解

经常有人会提到这个问题&#xff0c;从我个人的观点和经验来说2者最明显的特征是&#xff1a;分类是有具体分类的数量&#xff0c;而聚类是没有固定的分类数量。 你可以想象一下&#xff0c;分类算法就像是给你一堆水果&#xff0c;然后告诉你苹果、香蕉、橙子分别应该放在哪里…

Kotlin 基本语法5 继承,接口,枚举,密封

1.继承与重写的Open关键字 open class Product(val name:String ) {fun description() "Product: $name"open fun load() "Nothing .."}class LuxuryProduct:Product("Luxury"){//继承需要调用 父类的主构造函数override fun load(): String {…

自定义 Git Hook

前言 前端同学大概都熟悉 husky 这个工具&#xff0c;他可以直接在项目中添加 git hooks&#xff0c;主要解决了 git hooks 不会同步到 git 仓库的问题&#xff0c;保证了每个开发人员的本地仓库都能执行相同的 git hooks。 但是 husky 毕竟是一个 JS 生态的工具&#xff0c;…

ONLYOFFICE桌⾯应⽤程序v8.0:功能丰富,⽀持多平台

文章目录 可填写的 PDF 表单RTL支持电子表格中的新增功能其他改进和新增功能与 Moodle 集成用密码保护 PDF 文件快速创建文档本地界面主题总结 继 ONLYOFFICE 文档 v8.0 的发布后&#xff0c;很高兴&#xff0c;因为适用于 Linux、Windows 和 macOS 的 ONLYOFFICE 桌面应用程序…

【elementUi-table表格】 滚动条 新增监听事件; 滚动条滑动到指定位置;

1、给滚动条增加监听 this.dom this.$refs.tableRef.bodyWrapperthis.dom.scrollTop 0let _that thisthis.dom.addEventListener(scroll, () > {//获取元素的滚动距离let scrollTop _that.dom.scrollTop//获取元素可视区域的高度let clientHeight this.dom.clientHeigh…

Matlab/simulink基于MPPT风光储微电网建模仿真(持续更新)

​ 2.Matlab/simulink基于MPPT风光储微电网建模仿真&#xff08;持续更新&#xff09; 1.Matlab/simulink基于vsg的风光储调频系统建模仿真&#xff08;持续更新&#xff09;

QT 打包命令 windeployqt 在windows平台应用

本文以qt6.2.4 MSVC2019 为例&#xff0c;描述打包过程。 前置条件&#xff1a;已经生成了可执行文件&#xff0c;比如xxx.exe 1.在搜索框输入QT,点击QT6.2.4(MSVC 2019 64-bit) 以你实际安装的版本为准。 2.出现如下黑屏命令行 3.在QT 项目文件下新建一个打包文件夹&#x…

VIO第2讲:IMU标定实验

VIO第2讲&#xff1a;IMU标定实验 文章目录 VIO第2讲&#xff1a;IMU标定实验5 IMU标定实验5.1 仿真数据产生5.1.1 c代码分析5.1.2 生成ros包数据 5.2 Allan方差实验&#xff08;港科大imu_utils&#xff09;5.2.1 安装5.2.2 运行 5.3 Allan方差实验&#xff08;matlab代码kali…

Vue局部注册组件实现组件化登录注册

Vue局部注册组件实现组件化登录注册 一、效果二、代码1、index.js2、App.vue3、首页4、登录&#xff08;注册同理&#xff09; 一、效果 注意我这里使用了element组件 二、代码 1、index.js import Vue from vue import VueRouter from vue-router import Login from ../vie…

基于SVM的功率分类,基于支持向量机SVM的功率分类识别,Libsvm工具箱详解

目录 支持向量机SVM的详细原理 SVM的定义 SVM理论 Libsvm工具箱详解 简介 参数说明 易错及常见问题 完整代码和数据下载链接:基于SVM的功率分类,基于支持向量机SVM的功率分类识别资源-CSDN文库 https://download.csdn.net/download/abc991835105/88862836 SVM应用实例, 基于…

虚拟机的四种网络模式对比

nat网络地址转换 nat网络 桥接 内网模式 仅主机

【Java】java异常处理机制(实验五)

目录 一、实验目的 二、实验内容 三、实验小结 一、实验目的 1、理解java的异常处理机制 2、掌握try catch结构和thow和thows关键字的用法 二、实验内容 1、编写一个程序&#xff0c;输入某个班某门课程成绩&#xff0c;统计及格人数、不及格人数及课程平均分。设计一个异…

通天星CMSV6 车载视频监控平台信息泄露漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

【Python-语法】

Python-语法 ■ Python基础■ 数据类型■ 注释 单行注释&#xff0c;多行注释■ 编码方式 ■■■■■ ■ Python基础 ■ 数据类型 ■ 注释 单行注释&#xff0c;多行注释 ■ 编码方式 ■ ■ ■ ■ ■