Vue-$nextTick

$nextTick

官方文档

vm.$nextTick( callback ) callback Function 延迟回调的执行直到下一次 DOM
更新循环结束。当你改变一些数据之后调用它，当回调触发时 DOM 已经更新完毕。这和全局的 Vue.nextTick 效果相同，只是回调的
this 上下文会自动指向调用此方法的实例。

开发中遇到的问题
当你改变vue中某一组件内数值时、该组件不会立即重新渲染，而是加入事件循环队列，待事件循环队列执行当前时间时开始渲染，而如果你想在DOM更新后做一些操作，就需要使用$nextTick,
否则会发生下面的情况

  <div id="app">
	<div ref="Div1">{{msg}}</div>
	<div v-if="Div2">{{Div2}}</div>
	<div v-if="Div3">{{Div3}}</div>
	<input type="button" value="change" @click="changeDiv"/>
  </div>

  data(){
	  return{
		   msg: '渲染前',
		   Div2:"",
		   Div3:""
	  }  
  },
  methods:{
	  changeDiv(){
		  this.msg = "渲染后"
		  //不使用用nextTick方法直接拿到fDiv的内容会拿到渲染之前的信息
		  //Div2被赋值为渲染前
		  this.Div2=this.$refs.Div1.innerHTML
		  //Div3被赋值为渲染后
		  this.$nextTick(() => {
        this.Div3 = this.$refs.Div1.innerHTML
      })
	  }
  }

点击按钮

小结

Vue希望开发人员遵循“数据驱动”的方式，而不是直接操作 DOM，但是有时我们确实要这么做。为了在DOM更新后使用，变化之后的数据，可以在数据变化后用Vue.nextTick(callback)。

• 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中（created中还未挂载dom）