Vue.nextTick

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

它跟实例方法vm.$nextTick() 一样，不同的是 this 自动绑定到调用它的实例上

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

Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码

使用场景：

  • 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。

原因：在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进     Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。

  • 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

原因：Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。
当你设置 vm.someData = 'new value'，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题，为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

// html

<div id="app">

    <div id="dom">{{message}}</div>

</div>

// js

<script>

var vm = new Vue({

  el: '#app',

  data: {

    message: '123'

  },

  created () {

    this.message = 'new message' // 更改数据

    console.log(this.$el.textContent) //报错，此时el未渲染

    this.$nextTick(function () {

      var obj = document.getElementById('app')

      console.log(obj.innerHTML)

      console.log(this.$el.textContent === 'new message') // true

    })

  },

  mounted () {

    this.message = 'new message' // 更改数据
    // DOM 还没有更新

    console.log(this.$el.textContent)  //

    var obj = document.getElementById('app')

    console.log(obj.innerHTML)

    console.log(this.$el.textContent === 'new message') // false

    this.$nextTick(function () {
　　　// DOM 已更新
　　　// this 指向当前实例

      var obj = document.getElementById('app')

      console.log(obj.innerHTML)

      console.log(this.$el.textContent === 'new message') // true

    })

  }

</script>
<!doctype html><html>

<head>

<title>vue+chart</title>

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

</head>

<body>

<div class="app">

  <div ref="msgDiv" id="aa">{{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>

</body>

</html>

<script>

new Vue({

  el: '.app',

  data: {

    msg: 'Hello Vue.',

    msg1: '',

    msg2: '',

    msg3: ''

  },

  methods: {

    changeMsg() {

      this.msg = "Hello world."

      var obj = document.getElementById('aa')

      // 点击之后msg1仍为Hello Vue.

      this.msg1 = obj.innerHTML

      this.$nextTick(() => {

          // 点击之后msg2更新为Hello world.

        this.msg2 = obj.innerHTML

      })

      // 点击之后msg3仍为Hello Vue.

      this.msg3 = obj.innerHTML

    }

  }

})

</script>

此为另一实例，当点击按钮时，在nextTick回调中，dom 结构才更新；当再次点击时，因为aa的msg已经更新，所以msg1和msg3都是‘hello world’

参考：https://segmentfault.com/a/1190000008570874

http://blog.csdn.net/sinat_17775997/article/details/71638144

vue2.0 之 nextTick的更多相关文章

  1. vue2.0实践的一些细节

    最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...

  2. 项目vue2.0仿外卖APP（六）

    goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...

  3. vue2.0 transition -- demo实践填坑

    前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡.在使用2.0版本做过渡效果 ...

  4. 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑

    eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...

  5. vue2.0填坑有感(持续更新ing)

    1.请求数据 用本地json数据进行mock的时候,一般放在created 过程就Ok了,这样可以尽早获取数据:如果有依赖dom必须存在的清空,就放到mounted里面,具体用法如下所示: // cr ...

  6. vue2.0 技巧汇总

    /** * Created by */ export default { trim: (str) => { //删除左右两端的空格 return str.replace(/(^\s*)|(\s* ...

  7. 重开Vue2.0

    目录: 内容: 一.Vue内部指令: 1.v-if v-else&v-show v-if与v-show都是选择性显示内容的指令,但是二者之间有区别: 1.v-if:判断是否加载,在需要的时候加 ...

  8. vue2.0和better-scroll实现左右联动效果

    在做移动端商城或者其他页面的时候,经常会遇到左右联动的效果,今天小编vue2.0和better-scroll这个插件一起实现左右联动效果. 实现上面的效果,思路一定很重要,还有需求 1. 左边一级分类 ...

  9. vue2.0读书笔记2-进阶

    一.深入响应式原理 二.过渡效果 三.过渡状态 四.Render函数 五.自定义指令 六.混合 七.插件 八.单文件组件 九.生产环境 十.路由 vue-router: http://router.v ...

随机推荐

  1. Conturbatio

    Conturbatio Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  2. Oracle Select语句

    Oracle Select语句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,将学习如何使用Oracle SELECT语句从单个表中查询数据. ...

  3. PJSIP库设置Via地址

    好记性不如烂笔头,解决项目问题,调试代码跟踪到PJSIP 设置Via地址位置,记录下来,以备后用. PJSIP库在方法stateless_send_transport_cb中设置Via地址值,该方法在 ...

  4. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第7节 Arrays工具类_16_数组工具类Array

    在java.util的包下面.在这个包的下面是需要导包的,只有lang 的包下面是不需要导包的 查看jdk1.6的手册 Arrays让我们想起了数组,说明它提供了与数组相关的方法 我们可以看到 toS ...

  5. 测开之路一百一十二：bootstrap按钮

    bootstrap按钮 引入bootstrap和jquery 普通按钮和bootstrap风格按钮 调整大小 块级按钮 禁用按钮 disabled 按钮分组 分页按钮

  6. UI自动化之三种等待

    UI自动化中常用三种等待 目录 1.强制等待 2.隐式等待 3.显示等待 1.强制等待 执行到某一条语句后,然后sleep(3),等待3秒后,才会继续执行后面的语句 2.隐式等待 隐式等待只需要声明一 ...

  7. Caffe参数交换源码分析

    对境准备:对于多个GPU而言,一台机器2个GPU,参数交换的流程图: 参数交换从main()进入train()函数,在train函数中找到对应源码为: . . . . . ) { caffe::P2P ...

  8. IDEA基本设置和快捷键大全

    # IDEA基本设置 ## 设置编码格式 1. Configure - Settings - Editor - File Encodings 2. 将三个编码全部设置为UTF-8 ## 启用Ctrl+ ...

  9. node和数据库建立连接

    var express = require('express') , app = express(); var querystring = require('querystring'); var ut ...

  10. [SDOI2016]征途 —— 斜率优化DP

    时隔多年没有碰斜率优化了... 想当年被斜率优化虐的死去活来,现在看看...也就那样吧. Pine开始了从S地到T地的征途. 从S地到T地的路可以划分成n段,相邻两段路的分界点设有休息站. Pine计 ...