vue.nextTick定义：

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

简单理解：数据更新了，在dom渲染后立即执行该函数

举例

注意：Vue实现响应并不是数据发生变化之后DOM立即变化，而是按照一定的策略进行DOM更新。$nextTick是在下次DOM更新循环结束之后执行回调，在修改数据之后使用nextTick，则可以再回调中获取更新后的DOM

Vue.nextTick()使用的场景

1.Vue生命周期的created（）钩子函数进行的DOM操作一定要放在Vue。nextTick（）的回调函数。原因是，created的钩子函数执行时，DOM其实并未进行任何渲染，所以一定要将DOM操作的js代码放进Vue.nextTick()回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOm挂载已完成。

2.当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中。通俗讲：更新数据后，当你想立即使用js操作新的视图的时候需要使用它

正确做法:vue改变dom元素结构后使用vue.$nextTick（）方法来实现dom数据更新后延迟执行后续代码

3.使用第三方插件

笔记：vue.nextTick()方法的使用详解的更多相关文章

  1. vue.nextTick()方法的使用详解

    什么是Vue.nextTick()??   定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 所以就衍生出了这个获取更新后的DOM的Vue方法 ...

  2. Linux防火墙iptables学习笔记（三）iptables命令详解和举例[转载]

     Linux防火墙iptables学习笔记(三)iptables命令详解和举例 2008-10-16 23:45:46 转载 网上看到这个配置讲解得还比较易懂,就转过来了,大家一起看下,希望对您工作能 ...

  3. Vue插件编写、用法详解（附demo）

    Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...

  4. .NET Excel导出方法及其常见问题详解

    摘要:.NET Excel导出方法及其常见问题详解. 一.Excel导出的实现方法 在.net 程序开发中,对于Excel文件的导出我们一共有三种导出方式: 利用文件输出流进行读写操作 这种方式的导出 ...

  5. npm安装vue详细教程（图片详解）

    npm安装vue详细教程(图片详解) 一.总结 一句话总结:整个安装流程照着教程来,注意系统环境变量的配置,注意一下npm的本地仓库和缓存位置 教程 系统环境变量 仓库 缓存 1.什么情况下最适合用n ...

  6. cloudemanager安装时出现failed to receive heartbeat from agent问题解决方法（图文详解）

    不多说,直接上干货! 安装cdh5到最后报如下错误: 安装失败,无法接受agent发出的检测信号. 确保主机名称正确 确保端口7182可在cloudera manager server上访问(检查防火 ...

  7. cloudemanager安装时出现8475 MainThread agent ERROR Heartbeating to 192.168.30.1:7182 failed问题解决方法（图文详解）

    不多说,直接上干货!   问题详情 解决这个问题简单的,是因为有进程占用了.比如 # ps aux | grep super root ? Ss : : /opt/cm-/lib64/cmf/agen ...

  8. (转)live555学习笔记10－h264 RTP传输详解(2)

    参考: 1,live555学习笔记10-h264 RTP传输详解(2) http://blog.csdn.net/niu_gao/article/details/6936108 2,H264 sps ...

  9. Python进阶----线程基础,开启线程的方式(类和函数),线程VS进程,线程的方法,守护线程,详解互斥锁,递归锁,信号量

    Python进阶----线程基础,开启线程的方式(类和函数),线程VS进程,线程的方法,守护线程,详解互斥锁,递归锁,信号量 一丶线程的理论知识 什么是线程:    1.线程是一堆指令,是操作系统调度 ...

  10. vue视图不更新情况详解

    vue视图不更新情况详解:https://www.jb51.net/article/161371.htm

随机推荐

  1. 【驱动】libjpeg 库的移植

    1.下载库  http://www.ijg.org/  下载  jpegsrc.v9e.tar.gz 2.准备好空文件夹位置 opt/libdecode  opt/libdecode/lib  opt ...

  2. RocketMQ 如何保证消息不丢失,重复消费

    RocketMQ 如何保证消息不丢失 Producer 提供SYNC的发送消息方式,等待broker处理结果. 发送消息如果失败或者超时,则重新发送. // 同步发送消息,如果5秒内没有发送成功,则重 ...

  3. cookie报错 ：服务器异常An invalid character [32] was present in the Cookie value

    String KaptchaOwner= CommunityUtil.generateUUID(); Cookie cookie=new Cookie("kaptchaOwner" ...

  4. VSCode+EIDE开发CH32V系列RISC-V MCU

    VSCode+EIDE开发CH32V系列RISC-V MCU 1. VS Code Visual Studion Code (VS Code),是一款由微软开发且跨平台的免费源代码编辑器.该软件支持语 ...

  5. 虚拟内存跟物理内存之间的映射mmap\munmap

    #include <stdio.h> #include <sys/mman.h> int main(void) { /* * 创建虚拟内存的映射 * void *mmap (v ...

  6. 配置代码片段问题 Invalid characters in string. Control characters must be escaped.

    在使用代码片段时报错 Invalid characters in string. Control characters must be escaped. " somethings" ...

  7. Qt中跨进程Socket通信以及socket跨线程通信

    一 QTcpServer 创建流程 创建套接字服务器 QTcpServer 对象, 通过 QTcpServer 对象设置监听,即:QTcpServer::listen() 基于 QTcpServer: ...

  8. webrtc windows编译记录

    //cmd set path=D:\zzh\depot_tools;%path% set DEPOT_TOOLS_WIN_TOOLCHAIN 0 set vs2022_install=C:\Progr ...

  9. oracle之如何获取执行计划方法

    1.什么是执行计划 为了执行sql语句,Oracle在内部必须实现许多步骤,这些步骤可能是从数据库中物理检索数据行,或者用某种方法来准备数据行等,接着Oracle会按照一定的顺序一次执行这些步骤,最后 ...

  10. jmeter 添加断言和查看断言结果

    在对应的请求下添加响应断言,这里我们添加响应文本来作为检查点,来检查上面的这个请求是否成功 断言和断言结果是成对出现的,是为了检查我们添加的断言是否验证成功,如下图,如果成功,里面就会有对应的结果,且 ...