Vue.nextTick()是什么？

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；

nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数。
 

created()钩子函数中进行DOM操作时：

一般人会这样写：

<template>
  <div class="hello">
    <h1 id="nextTick" ref="hello">hello boy!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'HelloWorld'
    }
  },
    created(){
    let that=this;
    that.$refs.aa.innerHTML="hello girl!";  //写入到DOM元素

  },
}
</script>

<style scoped>
h1 {
  font-weight: normal;
}
</style>

但这样写会报错：

[Vue warn]: Error in created hook: "TypeError: Cannot set property 'innerHTML' of undefined"

原因：

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

正确的写法：

<template>
  <div class="hello">
    <h1 id="nextTick" ref="hello">hello boy!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'HelloWorld'
    }
  },
    created(){
        let that=this;
          that.$nextTick(function(){  //不使用this.$nextTick()方法会报错
          that.$refs.hello.innerHTML="hello girl!";  //写入到DOM元素
      });

  },
}
</script>

<style scoped>
h1 {
  font-weight: normal;
}
</style>