this.$nextTick使用技巧

这个方法基本上很少用到正如官网所言：

Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用

因此博主开始也觉得这个方法基本无用，因为如果需要dom更新后做些事情，完全可以在mounted钩子里去做，直到遇到一个问题。
如下例子，子组件：

<template>
  <div>
   {{message}}
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: 'child'
    }
  },
  methods: {
    test () {
      console.log(this.message)
    }
  }

}
</script>

父组件

  <child ref='child' :message="parient"></child>
  export default {
	 data () {
	    return {
	      parient: 'parient'
	      }
	    methods: {
	    click() {
	      this.parient = 'parient2'
	      this.$refs.child.test() 
	       // this.$nextTick(function () { this.$refs.child.test() })
	    }
  }

}
</script>

初始渲染没有问题

但是我们点击之后会发生什么事情呢
|

没错，显示的内容已经更新，但是我们在父组件调用子组件的方法时接收到的数据并不是我们改变后的数据，怎么办呢，这里就需要使用this.$nextTick(function () { this.$refs.child.test() })方法，他可以保证我们在调用子组件的方法时使用到的数据是最新的数据。
这里使用的场景是，弹框里面可以进行表格的查询，而打开弹框的时候希望表格执行一次查询，element的dialog使用的是display：none，因此如果放在钩子函数中只能执行一次，因为实例化了一次，所以只能在父组件调用子组件的查询方法。
当然如果是使用了v-if自己封装的弹框的话，自然不存在这个问题，因为v-if会每次执行实例化。