Vue 在更新 DOM 时是异步执行的。

只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。

异步更新DOM实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Vue nextTick</title>

    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>

<body>

    <div id="app">

        <example></example>

    </div>

    <script>

        // 注册 example 组件

        Vue.component('example', {

            template: '<span ref="box" @click="updateMessage">{{ message }}</span>',

            data () {

                return {

                    message: '未更新'

                }

            },

            methods: {

                updateMessage () {

                    this.message = '已更新'

                    console.log('nextTick方法前--->', this.$refs.box.textContent) // => '未更新'

                    this.$nextTick(function () {

                        console.log('nextTick方法内--->', this.$refs.box.textContent) // => '已更新'

                    })

                    console.log('nextTick方法后--->', this.$refs.box.textContent) // => '未更新'

                }

            }

        })

        // 创建根实例

        new Vue({

            el: '#app'

        })

    </script>

</body>

</html>

点击 span , 执行 updateMessage方法，输出结果如下：

nextTick方法前---> 未更新

nextTick方法后---> 未更新

nextTick方法内---> 已更新

可见，Vue 数据发生变化之后，视图不会立即变化。该更新过程是异步的。

所以，如果要获取更新后的视图，可以使用 $nextTick(callback)。这里的回调函数（callback）将在数据更新完成，视图更新完毕之后被调用。

$nextTick 结合 async/await 语法

$nextTick() 返回一个 Promise 对象，所以可以使用新的 ES2016 async/await 语法完成相同的事情：

methods: {

    async updateMessage () {

        this.message = '已更新'

        console.log('nextTick方法前--->', this.$refs.box.textContent) // => '未更新'

        await this.$nextTick(function () {

            console.log('nextTick方法内--->', this.$refs.box.textContent) // => '已更新'

        })

        console.log('nextTick方法后--->', this.$refs.box.textContent) // => '已更新'

    }

}

执行点击事件，打印结果：

nextTick方法前---> 未更新

nextTick方法内---> 已更新

nextTick方法后---> 已更新

$nextTick 常用场景

在Vue生命周期钩子函数created()中进行的DOM操作。

由于created()钩子函数中还未对DOM进行任何渲染，所以无法直接操作，需要通过$nextTick()回调来完成。

created() {

    console.log(this.$refs.box.textContent);  // TypeError: Cannot read property 'textContent' of undefined

    this.$nextTick(() => {

        console.log(this.$refs.box.textContent);  // 未更新

    })

},

Vue 中 $nextTick() 的应用的更多相关文章

  1. vue中nextTick

    vue中nextTick可以拿到更新后的DOM元素 如果在mounted下不能准确拿到DOM元素,可以使用nextTick 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue ...

  2. vue的nextTick的实现

    vue的nextTick是用浏览器支持的方法模拟nodejs的process.nextTick 老版本的vue用如下方法来模拟 Promise.thenMutationObserver(Mutatio ...

  3. Vue中nextTick()解析

    最近,在开发的时候遇到一个问题,让我对vue中nextTick()的用法加深了了解- 下面是在组件中引用的一个拖拽的组件: <vue-draggable-resizable class=&quo ...

  4. Vue的nextTick是什么？

    公司做之前项目的时候,遇到了一些比较困惑的问题,后来研究明白了nextTick的用法. 我们先看两种情况: 第一种: export default { data () { return { msg: ...

  5. 【vue】nextTick源码解析

    1.整体入手 阅读代码和画画是一样的,忌讳一开始就从细节下手(比如一行一行读),我们先将细节代码折叠起来,整体观察nextTick源码的几大块. 折叠后代码如下图 整体观察代码结构 上图中,可以看到: ...

  6. Vue中$nextTick的理解

    Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...

  7. 基于源码分析Vue的nextTick

    摘要:本文通过结合官方文档.源码和其他文章整理后,对Vue的nextTick做深入解析.理解本文最好有浏览器事件循环的基础,建议先阅读上文<事件循环Event loop到底是什么>. 一. ...

  8. vue之nextTick全面解析

    vue的第一篇文章,介绍一下简单的nextTick方法的实现原理 简介 vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框 ...

  9. vue中nextTick和$nextTick的差别

    <ul id="demo">     <li v-for="item in list">{{item}}</div> < ...

  10. 基于iscroll的better-scroll在vue中的使用

    什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里.better-scroll 也很强 ...

随机推荐

  1. html2canvas@^1.0.0-rc.1

    这个版本的html2canvas是我在npm找到的,有严重问题,如截图后字体变小,解决方法就是官网找个min.js的版本,放到项目中引用就好 https://html2canvas.hertzen.c ...

  2. Kinect一代学习（一）：开发环境搭建

    https://blog.csdn.net/hongbin_xu/article/details/80722749 我用的是kinect一代(Xbox 360)的所以选择了v1.x的SDK,如果是ki ...

  3. WindowChrome

      "chrome"一词在设计术语中是"框架"的意思,即浏览器的除了网页之外的部分. https://www.cnblogs.com/dino623/p/Cus ...

  4. ORA-25153错误及解决办法

    出现下图错误 原因就是没有临时表空间,所以要建立临时表空间,下面的语句,记得把地址换成你自己想放的地方. alter tablespace temp add tempfile 'C:/temp.dbf ...

  5. Linux搭建简单的http文件服务器

    为了让自动化脚本可以通过wget来下载安装包,需要在集群中的某个节点部署一个http文件服务器 在Ubuntu中通过apt-get install apache2 安装apache2CentOS7中通 ...

  6. Linux学习之编译运行.c(C语言)文件

    在Linux命令行界面下,创建文件hello.c,进入vim编辑器,编辑一个简单的C语言文件 分解C语言文件执行过程,要经过预编译.编译.汇编.连接四个步骤后才能执行, 预编译:gcc -E hell ...

  7. 记录一次在生成数据库服务器上出现The timeout period elapsed prior to completion of the operation or the server is not responding.和Exception has been thrown by the target of an invocation的解决办法

    记一次查询超时的解决方案The timeout period elapsed...... https://www.cnblogs.com/wyt007/p/9274613.html Exception ...

  8. Java8 流式 API（`java.util.stream`）

    熟悉 ES6 的开发者,肯定对数组的一些方法不是很陌生:map.filter 等.在对一组对象进行统一操作时,利用这些方法写出来的代码比常规的迭代代码更加的简练.在 C♯ 中,有 LINQ 来实现.那 ...

  9. iOS 测试 WebDriverAgent 简介

    WebDriverAgent 是什么   去年的 SeleniumConf 上,Facebook 推出了一款新的iOS移动测试框架 —— WebDriverAgent,当时的推文上,写的还只支持模拟器 ...

  10. Linux之三剑客

    LINUX之三剑客 本篇主要介绍linux下常用的增删改查工具: grep sed awk grep是linux下一个强大的搜索工具,几乎操作linux的用户每天都会或多或少的用到grep命令,单一个 ...