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. Ubuntu之切换root用户提示认证失败

    出现认证失败(Authentication failure)的原因有两种,要么是密码输入错误,要么是新安装的系统还没有给root设置密码,,如果是后者,可以通过命令sudo passwd root进行 ...

  2. RocketMq 下载安装

    下载地址 https://rocketmq.apache.org/zh/download linux安装步骤 启动nameserver bin目录下启动nameserver nohup sh mqna ...

  3. 转载-Shell脚本中字符串截取功能

    在Shell脚本编写中,有几个地方都是要用到字符串截取的功能,那将这块的内容进行下记录: 1.字符串变量的截取操作 对字符串变量的截取操作一般都是通过${操作符}的方式进行 1)从指定位置index截 ...

  4. 14-K8S之helm入门到逃跑

    目录 helm入门 1.helm介绍 2.helm核心术语 3.helm下载和安装 3.1以helm3.6为测试实例 3.2以helm3.7.2为例 helm v2版本在集群上部署Tiller 1.创 ...

  5. react useGetObjState

    import {useCallback, useRef, useState} from 'react';function useGetObjState(initialState = {}) { con ...

  6. MAYA专用卸载工具，完全彻底卸载删除干净maya各种残留注册表和文件的方法和步骤

    maya专用卸载工具,完全彻底卸载删除干净maya各种残留注册表和文件的方法和步骤.如何卸载maya呢?有很多同学想把maya卸载后重新安装,但是发现maya安装到一半就失败了或者显示maya已安装或 ...

  7. python+POM项目设计模式

    分为三层: 第一层:common对selenium进行二次封装,定位元素,操作元素的一些方法,公共方法比如连接数据库.读写yml文件等 第二层:页面封装pages 第三层:测试用例cases

  8. JSONObject.parseObject syntax error,expect START WITH { OR [,but actually START WITH error

    JSONObject.parseObject syntax error,expect START WITH { OR [,but actually START WITH error解析JSON出现异常 ...

  9. 基于Antlr的Modelica3.5语言解析

    背景 Modelica语言是一种统一面向对象的系统建模语言 官方文档中明确写明了语法规范 在附录的第一章词法,第二章语法都完整的罗列的语言规范,对于Antlr适配特别好 只需要把[]修改为Antlr的 ...

  10. git（后悔药）版本回退

    版本回退 查看提交记录 git log remotes/origin/test --pretty=oneline (建议获取远程日志记录,防止本地没有更新到最新版本) 如果本地是最新版本可以使用:gi ...