010-$nextTick

本文主要是介绍010-$nextTick，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、问题

Vue 实现响应式，在 data 更新后，一定时间内，没有继续操作DOM，然后会触发浏览器渲染引擎去更新DOM，更新DOM也是需要时间的，所以 data 更新引起的 DOM更新并不是实时的。

2、$nextTick

this.$nextTick(() => {// ...
});

• $nextTick 是在下次 DOM 更新循环结束之后执⾏延迟回调，在修改数据之后使⽤ $nextTick，则可以在回调中获取更新后的 DOM，在下次 DOM 更新循环结束之后执行延迟回调。
• 当数据更新了，在dom中渲染后，⾃动执⾏该函数。

3、应用场景

💡 Tips：显示组件，并调用组件的初始化方法

<template><div id="app"><Son v-if="showSonComponent" ref="sonComponent" /></div>
</template><script>
import Son from './components/SlotComponents/Son'
export default {name: 'App',components: { Son },data() {return {showSonComponent: false}},methods: {init() {// 更新该变量，会引起 DOM 更新this.showSonComponent = truethis.$nextTick(() => {// 需要等DOM更新完成后调用init方法this.$refs.sonComponent.init()})}}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;background: #4a90e2;color: #fff;padding: 20px;
}
.slot-contant {color: #f00;font-size: 16px;
}
</style> 

这篇关于010-$nextTick的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---