有同学在看 Vue 官方文档时，对 API 文档中的 Vue.nextTick 和 vm.$nextTick 的作用不太理解。

其实如果看一下深入响应式原理 - vue.js中的有关内容，可能会有所理解，不过有些同学可能看到这个标题之后就选择跳过了，因此这里简述如下：

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM，有些同学可能不大理解什么叫 DOM is now updated，在深入响应式原理 - vue.js中的示例情况也比较罕见，Vue 模板中直接在根无素中进行插值，然后在实例方法中使用了 this.$el.textContent 来获得更新之后的 DOM。为了更好地理解这一点，修改示例如下：

 <!DOCTYPE html>

 <html>

     <head>

         <title>Test</title>

     </head>

     <body>

         <script src="https://unpkg.com/vue/dist/vue.js"></script>

         <div class="app">

           <div ref="msgDiv">{{msg}}</div>

           <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>

           <div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>

           <div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>

           <button @click="changeMsg">

             Change the Message

           </button>

         </div>

         <script type="text/javascript">

             new Vue({

               el: '.app',

               data: {

                 msg: 'Hello Vue.',

                 msg1: '',

                 msg2: '',

                 msg3: ''

               },

               methods: {

                 changeMsg() {

                   this.msg = "Hello world."

                   this.msg1 = this.$refs.msgDiv.innerHTML

                   this.$nextTick(() => {

                     this.msg2 = this.$refs.msgDiv.innerHTML

                   })

                   this.msg3 = this.$refs.msgDiv.innerHTML

                 }

               }

             })

         </script>

     </body>

 </html>

点击按钮前的界面：

点击按钮之后，界面如下，注意观察三个条件渲染的结果之间的差异。

看完这个示例，也许有人会问，我在 Vue 实例方法中修改了数据，然后再在 $nextTick 回调中获取该数据在相应 DOM 元素所绑定的内容（或属性）殊无必要，我为什么需要这样的 API 呢？

考虑这样一种场景，你有一个 jQuery 插件，希望在 DOM 元素中某些属性发生变化之后重新应用该插件，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。

理解 vm.$nextTick的更多相关文章

  1. Vue系列---理解Vue.nextTick使用及源码分析(五)

    _ 阅读目录 一. 什么是Vue.nextTick()? 二. Vue.nextTick()方法的应用场景有哪些? 2.1 更改数据后,进行节点DOM操作. 2.2 在created生命周期中进行DO ...

  2. vue2.0 正确理解Vue.nextTick()的用途

    什么是Vue.nextTick() 官方文档解释如下: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 获取更新后的DOM,言外之意就是DOM更新 ...

  3. [NodeJs系列][译]理解NodeJs中的Event Loop、Timers以及process.nextTick()

    译者注: 为什么要翻译?其实在翻译这篇文章前,笔者有Google了一下中文翻译,看的不是很明白,所以才有自己翻译的打算,当然能力有限,文中或有错漏,欢迎指正. 文末会有几个小问题,大家不妨一起思考一下 ...

  4. 【nodejs原理&源码赏析（7）】【译】Node.js中的事件循环，定时器和process.nextTick

    [摘要] 官网博文翻译,nodejs中的定时器 示例代码托管在:http://www.github.com/dashnowords/blogs 原文地址:https://nodejs.org/en/d ...

  5. 【nodejs原理&源码赏析（7）】【译】Node.js中的事件循环，定时器和process.nextTick

    目录 Event Loop 是什么? Event Loop 基本解释 事件循环阶段概览 事件循环细节 timers pending callbacks poll阶段 check close callb ...

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

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

  7. 总结了一下 Vue.nextTick() 的原理和用途

    对于 Vue.nextTick 方法,自己有些疑惑.在查询了各种资料后,总结了一下其原理和用途,如有错误,请不吝赐教. 概览 官方文档说明: 用法: 在下次 DOM 更新循环结束之后执行延迟回调.在修 ...

  8. Vue.nextTick()的使用

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

  9. vue 改变数据DOM不更新，获取不到DOM的解决方法

    1.获取不到DOM的解决方案(使用$nextTick) 定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 理解:nextTick(),是将回调 ...

随机推荐

  1. Eureka服务注册中心相关错误com.sun.jersey.api.client.ClientHandlerException: java.net.ConnectException: Connection refused: connect

    启动项目报错如下 原因: 在默认设置下,Eureka服务注册中心也会将自己作为客户端来尝试注册它自己,所以会出现 com.sun.jersey.api.client.ClientHandlerExce ...

  2. Java内省详解

    内省和反射有什么区别: 反射式在运行状态把Java类中的各种成分映射成相应的Java类,可以动态的获取所有的属性以及动态调用任意一个方法,强调的是运行状态.  内省机制是通过反射来实现的,BeanIn ...

  3. sed学习[参考转载]

    一.选项与参数: -n :使用安静(silent)模式.在一般 sed 的用法中,所有来自 STDIN 的数据一般都会被列出到终端上.但如果加上 -n 参数后,则只有经过sed 特殊处理的那一行(或者 ...

  4. 云主机IO性能测试

    1:数据读取速度 ucloud云主机最低224.8MB/S,最高508.8MB/S,平均410.7MB/S     阿里云主机最低17.4MB/S, 最高189.6MB/S,平均170.6MB/S   ...

  5. Orace 12.2 ORA-12012: error on auto execute of job "SYS"."ORA$AT_OS_OPT_SY_21"

    一个测试环境的12.2.0.1数据库后台alert不断报出以下错误信息: Errors in file /d12/app/oracle/diag/rdbms/test/test/trace/test_ ...

  6. Android 使用开源库StickyGridHeaders来实现带sections和headers的GridView显示本地图片效果

    大家好!过完年回来到现在差不多一个月没写文章了,一是觉得不知道写哪些方面的文章,没有好的题材来写,二是因为自己的一些私事给耽误了,所以过完年的第一篇文章到现在才发表出来,2014年我还是会继续在CSD ...

  7. openfire接收离线消息

    先接收离线消息后再通知openfire上线 //获取离线消息 OfflineMessageManager offlineMessageManager=new OfflineMessageManager ...

  8. PaaS 应用引擎

    这里主要是梳理一下应用引擎(XXXX App Engine),它一般被归类到PaaS领域.应用引擎即提供了各种编程语言开发的应用所需的一整套运行环境:它开箱即用,你只需部署应用的代码即可,无需前期的环 ...

  9. Java知多少（101）图像缓冲技术

    当图像信息量较大,采用以上直接显示的方法,可能前面一部分显示后,显示后面一部分时,由于后面一部分还未从文件读出,使显示呈斑驳现象.为了提高显示效果,许多应用程序都采用图像缓冲技术,即先把图像完整装入内 ...

  10. Java如何使套接字向单个客户端显示消息？

    在Java编程中,如何使用套接字向单个客户端显示消息? 以下示例演示了如何使用Socket类的ssock.accept()方法向单个套接字客户端上显示消息. package com.yiibai; i ...