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

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

所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；

也就是数据发生改变后，DOM渲染还没有完成呢；数据发生变化后不能获取更新后的DOM，但是用vue.nextTick()就能获取更新后的DOM数据；获取更新后的DOM的Vue方法；当数据更新了，在dom中渲染后，自动执行该函数，

 

<template>
  <div class="wrapper">
    <p>过滤过的数组{
 { list | capitalize }}</p>
    <div ref="oDiv">{
 {message}}</div>
    <button @click="newMessage">点击获取</button>
  </div>
</template>

<script>
import indexChild from './indexChild'
import One from './one'
import Two from './two'
import Three from './three'
export default {
  name: 'index',
  data () {
    return {
      show: true,
      list: [6, 5, 7, 10, 24, 13