如何在Vue中使用nextTick（）

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