$nextTick的理解

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

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

理解:nextTick是将回调函数延迟在下一次dom更新数据后调用，简单的理解就是:当数据更新了，当数据渲染后，自动执行该函数
在这里我们简单实现一个示例。

<template>
  <div id="app">
 	 <div id="box" v-if="showDiv">
      	hello,vue
     </div>
    <button @click="getText">获取div内容</button> -->
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      showDiv:false
    }
  },
  methods: {
    getText(){
      this.showDiv = true;
            this.$nextTick(function(){
                var text = document.getElementById('box').innerHTML;
                console.log(text);  
            });
    },
  },
}
</script>

<style>

</style>

注意：Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM.

什么时候需要用到$nextTick?
Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数， 因为在created()创建的钩子函数执行的时候dom并没有进行渲染。所以一定要给他放到nextTick()回调函数中。和他对应的就是mounted钩子函数，因为该钩子函数执行的时候所有的dom元素已完成。