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. docker 安装mongodb

    一.安装mongodb 我们首先改一下镜像源,避免拉去速度太慢 创建daemon.json文件:位于/etc/docker目录下: 登录阿里云 即可 2.docker 搜索mongo镜像 然后pull ...

  2. FPGA 原理、结构、开发流程简述

    简介本文主要介绍了博主在阅读天野英晴主编的<FPGA 原理和结构>一书时的读书笔记,方便更好的了解和入门 FPGA.本博客图片均来自于参考文献 [1]. FPGA 特性和粒度FPGA 是一 ...

  3. 各种工具点评以供选择使用 + 开发工具秘籍（git, webpack。。。。）

    git最佳实践: https://gist.github.com/fandean/ca29cd2f326f66c659951d7ab356cefb ========================== ...

  4. 如何在网页打开CAD,DWG文件，（在线CAD）在线CAD平台，H5前端显示CAD，网页CAD

    简介 提示:目前提供两种在网页中浏览编辑CAD图纸方案,详细说明见:https://help.mxdraw.com/?pid=46 提示:MxDraw云图在线API教程:https://demo.mx ...

  5. DAC双通道模板

    #define DAC_C #include "dac.h" float DAC_DispenseA; float DAC_DispenseB; void MyDAC_Init(v ...

  6. COOP/COHP(上)-PROOUT

    晶体轨道重叠布居 COOP(crystal orbital overlap population)的一个更为直观的名称是 重叠布居权重的态密度 (overlap population-weighted ...

  7. Linux&Android相关常用命令汇总记录

    Linux&Android相关常用命令汇总记录 0@Linux&Android系统命令行下如何查看命令的帮助信息: command --help 1@在Linux系统中,设备分为三类, ...

  8. Git 工作常用操作

    撤回commit 上一次提交的代码 git reset --soft HEAD^ HEAD^的意思是上一个版本,也可以写成HEAD~1 如果你进行了2次commit,想都撤回,可以使用HEAD~2 g ...

  9. Centos 升级到指定内核

    1. 准备阶段 下载安装包到进行升级服务器 wget -c https://acs-ecp.oss-cn-hangzhou.aliyuncs.com/rpm/kernel-4.19.1-rpm.tar ...

  10. Django设计模式(MVC/MVT)

    Django设计模式(MVC/MVT) 目的:了解什么是MVC,MVT 思考:为什么要用设计模式 分工.解耦,让不同的代码块之间降低耦合,增强代码的可扩展性和可移植性,实现向后兼容. MVC: M全拼 ...