如何在Vue中使用nextTick（）

　　vue 中组件的（props 或 state）发生变化时不会立刻在 DOM 中响应，Vue 是异步更新 DOM的。所以有时当你修改了组件状态后，立刻获取对应dom对象，会发现获取不到。这个时候，就要用到Vue.nextTick()。
　　让我们详细的看看nextTick()函数是如何工作的。1.Vue.nextTick()
　　更改 Vue 组件数据时，DOM 会异步更新。Vue 会从所有组件中收集对虚拟 DOM 的多次更新，然后尝试创建一个批处理来更新 DOM。
　　例如，让我们看下一个切换元素显示的组件： 
　　单击  显示/隐藏  按钮更改  this.show   值，然后使用指令  v-if=＂show＂   切换    元素的显示。
　　在  handleClick 函数中  ，分别在控制台打印了this.show 和  this.$refs.content  （包含该   元素的引用） 的元素对象 ，此时会发现他们的结果不一致。  当  this.show   值为  true 时  , 结果  this.$refs.content  is 值却是  undefined  ，这意味着 DOM 与组件的数据不同步。
　　如果你想捕捉 DOM 刚刚更新的那一刻，那么你需要使用一个特殊的函数  Vue.nextTick(callback)  。
　　在DOM响应数据的变化后，会立刻执行 callback 回调函数。 
　　这时，点击 显示/隐藏  按钮更改  this.show   值时，您会看到  this.$refs.content   与  this.show   值完全对应。 2. this.$nextTick()
　　Vue 允许在组件实例上使用  this.$nextTick(callback)  。
　　在下面的示例  handleClick()   方法中更改  this.show   值，并使用  this.$nextTick()   捕捉DOM的更新： 
　　如果要访问当前组件实例的更新使用  this.$nextTick()   更方便。 3. 带有async/await的 nextTick()
　　如果在没有参数的情况下调用  Vue.nextTick() 或    this.$nextTick()  ，则函数返回一个 promise。
　　使用 async/await   语法更具可读性的。
　　例如，让我们通过使用以下  async/await   语法捕获 DOM 更新： 
　　async handleClick()   已被标记为异步函数。
　　点击 显示/隐藏  按钮时， this.show   值会发生变化。
　　await this.$nextTick()   等待DOM的更改，在控制台打印  console.log(this.$refs.content)   引用的元素对象。
　　建议使用  async/await   语法，因为它比回调方法更具可读性。 4.总结当您更改组件的数据时，Vue 会异步更新 DOM。 如果你想在组件的数据发生变化后立刻捕捉到 DOM 的更新，那么你需要使用  Vue.nextTick(callback)   或  this.$nextTick(callback)   函数。 他们的  callback   参数将在 DOM 更新后立即调用，并且保证您获得与组件数据同步的最新 DOM。 如果您不为  Vue.nextTick() 或 this.$nextTick()   提供回调参数，那么将返回一个promise，该promise 将在 DOM 更新时被解析执行。 将其与  async/await   语法一起使用将比回调方法更具可读性。