vue-nextTick(nextTick---入门到离职系列)

官方定义

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

个人理解

假设我们更改了某个 dom 元素内部的文本,而这时候我们想直接打印这个更改之后的文本是需要 dom 更新之后才会实现的。

小案例

<template><div ref="setting">{{msg}}</div>
</template><script>
export default {data(){return{msg:'HelloWorld!'}},methods:{},created(){//直接获取console.log(this.$refs.setting,'这个是在created中获取ref');//结果undefined//使用this.$nextTick()获取this.$nextTick(()=>{console.log(this.$refs.setting,'这个是在nextTick中获取ref');//结果是Dom元素})},
};
</script>

可以根据打印的顺序看到,在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作并无作用,而在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象。

面试题

1.NextTick是什么?

答:

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

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

2.使用场景是什么?

如果想要在修改数据后立刻得到更新后的DOM结构

3.语法结构是什么样?

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

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

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

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

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

4.为什么使用this.$nexttick?

因为 vue 采用的异步更新策略,当监听到数据发生变化的时候不会立即去更新DOM,
而是开启一个任务队列,并缓存在同一事件循环中发生的所有数据变更;
这种做法带来的好处就是可以将多次数据更新合并成一次,减少操作DOM的次数,
如果不采用这种方法,假设数据改变100次就要去更新100次DOM,而频繁的DOM更新是很耗性能的。

5.nextTick 原理

将传入的回调函数包装成异步任务,异步任务又分微任务和宏任务,为了尽快执行所以优先选择微任务;

nextTick 提供了四种异步方法 Promise.then、MutationObserver、setImmediate、setTimeout(fn,0)

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

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

相关文章

聊一聊EGO-Planner膨胀系数的大小对无人机避障飞行的影响

EGO-Planner简介 EGO-Planner作为业界知名的无人机轨迹规划算法&#xff0c;其优势在于能够在复杂环境中快速规划出安全、平滑且动态可行的飞行轨迹。在这个算法中&#xff0c;膨胀系数发挥着关键作用。它通过扩大障碍物的感知范围&#xff0c;提供额外的安全边距&#xff0c;…

NOIP2018-J-4-对称二叉树的题解

原题描述&#xff1a; 题目描述 时间&#xff1a;1s 空间&#xff1a;256M 一棵有点权的有根树如果满足以下条件&#xff0c;则被轩轩称为对称二叉树&#xff1a; 1. 二叉树&#xff1b; 2. 将这棵树所有节点的左右子树交换&#xff0c;新树和原树对应位置的结构相同且…

Rust 介绍与开发环境搭建

Rust简介 Rust是一种新型的系统编程语言&#xff0c;注重安全、速度和并发性。这种语言设计的目标是提供了内存安全的保证&#xff0c;同时保持高性能和零成本抽象。Rust不使用垃圾收集器&#xff0c;提供了类似C的资源管理模式&#xff0c;拥有像Python一样丰富的函数库&…

python输出HelloWorld

学习编程语言的第一步几乎都是输出“Hello World”&#xff0c;而python也是如此。想要使用python语言输出"Hello World",需要使用python的heapq包中的heappush和heappop函数&#xff0c;heapq模块来实现最小堆&#xff0c;最小堆用于每次从所有列表的当前元素中选择…

Dubbo之消费端服务RPC调用

在消费端服务是基于接口调用Provider端提供的服务&#xff0c;所以在消费端并没有服务公共接口的实现类。 使用过程中利用注解DubboReference将目标接口作为某个类的字段属性&#xff0c;在解析该类时获取全部字段属性并单独关注解析存在注解DubboReference的字段属性。通过步…

电销智能机器人 2024年智能电话机器人

随着技术的发展&#xff0c;人工智能的时代离我们越来越近&#xff0c;在人工智能的影响下许多传统行业开始向智能化方向转型&#xff0c;其中最明显的就是电话营销方面的工作。为了减轻人工销售负担出现了一个电销机器人系统&#xff0c;每天能拨打3000通电话&#xff0c;最高…

JAVA讲解算法-排序算法-选择排序算法-02

一、定义 选择排序法是一种不稳定的排序算法。它的工作原理是每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;然后&#xff0c;再从剩余未排序元素中继续寻找最小&#xff08;大&#xff09;元素&a…

【深度学习】LoRA: Low-Rank Adaptation of Large Language Models,论文解读

文章&#xff1a; https://arxiv.org/abs/2106.09685 文章目录 摘要介绍LoRA的特点什么是低秩适应矩阵&#xff1f;什么是适应阶段&#xff1f;低秩适应矩阵被注入到预训练模型的每一层Transformer结构中&#xff0c;这一步是如何做到的&#xff1f; 摘要 自然语言处理的一个重…

计算机网络-网络互联与互联网(一)

1.常用网络互联设备&#xff1a; 1层物理层&#xff1a;中继器、集线器2层链路层&#xff1a;网桥、交换机3层网络层&#xff1a;路由器、三层交换机4层以上高层&#xff1a;网关 2.网络互联设备&#xff1a; 中继器Repeater、集线器Hub&#xff08;又叫多端口中继器&#xf…

图论(算法竞赛、蓝桥杯)--Dijkstra算法最短路

1、B站视频链接&#xff1a;D02 最短路 Dijkstra 算法_哔哩哔哩_bilibili 题目链接&#xff1a;【模板】单源最短路径&#xff08;弱化版&#xff09; - 洛谷 #include <bits/stdc.h> using namespace std; #define INF 2147483647 int n,m,s,a,b,c; const int N100010…

Redis的主从复制和哨兵模式

Redis的主从复制和哨兵模式 Redis集群搭建&#xff08;一主二从&#xff09;replication 主从复制配置文件 redis.confRedis主从复制工作原理全量复制增量复制redis主从复制策略 搭建集群 &#xff08;主从复制引入&#xff09; 哨兵模式概念哨兵配置文件 sentinel.conf哨兵配置…

ArcgisForJS如何使用ArcGIS Server发布的切片地图服务?

文章目录 0.引言1.准备海量地理数据2.ArcGIS Server发布切片地图服务3.ArcgisForJS使用ArcGIS Server发布的切片地图服务 0.引言 ArcGIS Server是一个由Esri开发的地理信息系统&#xff08;GIS&#xff09;服务器软件&#xff0c;它提供了许多功能&#xff0c;包括发布切片地图…

java面试设计模式篇

面试专题-设计模式 前言 在平时的开发中&#xff0c;涉及到设计模式的有两块内容&#xff0c;第一个是我们平时使用的框架&#xff08;比如spring、mybatis等&#xff09;&#xff0c;第二个是我们自己开发业务使用的设计模式。 面试官一般比较关心的是你在开发过程中&#…

对于着色器语言 opengl 和 direct3d 有区别吗?

OpenGL和Direct3D是两种不同的图形API&#xff08;应用程序接口&#xff09;&#xff0c;它们都支持着色器编程&#xff0c;但在语法、结构和一些功能细节上存在差异。 OpenGL着色器语言&#xff1a; OpenGL使用GLSL (OpenGL Shading Language) 作为其着色器编程语言。GLSL可以…

挑战杯 基于卷积神经网络的乳腺癌分类 深度学习 医学图像

文章目录 1 前言2 前言3 数据集3.1 良性样本3.2 病变样本 4 开发环境5 代码实现5.1 实现流程5.2 部分代码实现5.2.1 导入库5.2.2 图像加载5.2.3 标记5.2.4 分组5.2.5 构建模型训练 6 分析指标6.1 精度&#xff0c;召回率和F1度量6.2 混淆矩阵 7 结果和结论8 最后 1 前言 &…

vue实现列表自动滚动效果

1.下载插件 npm install vue-seamless-scroll --save 2.在main.js中引入注册 import scroll from vue-seamless-scroll Vue.use(scroll) 3.在页面中使用&#xff08;写一个固定的表头 el-table:show-header"status" 设置为false,自带的表头不显示&#xff09; <…

什么是单例模式?

单例模式&#xff0c;属于创建类型的一种常用的软件设计模式。通过单例模式的方法创建的类在当前进程中只有一个实例&#xff08;根据需要&#xff0c;也有可能一个线程中属于单例&#xff0c;如&#xff1a;仅线程上下文内使用同一个实例&#xff09; 数学与逻辑学中&#xff…

Oracle迁移到mysql-导出mysql所有索引和主键

导出建库表索引等&#xff1a; [rootlnpg ~]# mysqldump -ugistar -pxxx -h192.168.207.143 --no-data -d lndb > lndb20230223-1.sql 只导出索引&#xff1a;参考&#xff1a;MYSQL导出现有库中的索引脚本_mysql 导出数据库所有表的主键和索引-CSDN博客 -- MYSQL导出现有…

【Numpy】P1 概述与安装

目录 概述安装Windows MacOS 环境下Linux 环境下 概述 NumPy&#xff08;Numerical Python&#xff09;&#xff0c;是一个对 Python 进行增强的库。它为 Python 提供了强大的多维数组对象和丰富的数学函数库&#xff0c;主要用于处理高维数组和矩阵计算。其核心功能包括&…

1、什么是ETF?

ETF是Exchange Traded Fund的英文缩写&#xff0c;中文称为“交易型开放式指数基金”&#xff0c;又称“指数股”。ETF是一种指数投资工具&#xff0c;通过复制标的指数来构建跟踪指数变化的组合证券&#xff0c;使得投资者通过买卖一种产品就实现了一揽子证券的交易。简单来说…