简单理解Vue中的nextTick

最新推荐文章于 2024-08-07 21:28:33 发布

LRH0211

最新推荐文章于 2024-08-07 21:28:33 发布

阅读量2.8k

点赞数

分类专栏： Vue学习文章标签： vue 异步 DOM nextTick

本文链接：https://blog.csdn.net/LRH0211/article/details/79203025

版权

本文解析Vue的nextTick，介绍其在DOM更新中的作用，以及在何时何地使用。通过示例说明Vue的DOM更新是异步的，讲解nextTick在Vue生命周期中的应用场景，并探讨了其源码实现，包括Promise、MutationObserver和setTimeout的使用。

摘要由CSDN通过智能技术生成

Vue中的nextTick涉及到Vue中DOM的异步更新，感觉很有意思，特意了解了一下。其中关于nextTick的源码涉及到不少知识，很多不太理解，暂且根据自己的一些感悟介绍下nextTick。

一、示例

先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。

模板

<div class="app">
  <div ref="msgDiv">{
   {
   msg}}</div>
  <div v-if="msg1">Message got outside $nextTick: {
   {
   msg1}}</div>
  <div v-if="msg2">Message got inside $nextTick: {
   {
   msg2}}</div>
  <div v-if="msg3">Message got outside $nextTick: {
   {
   msg3}}</div>
  <button @click="changeMsg">
    Change the Message
  </button>
</div>

Vue实例

new Vue({
  el: '.app',
  data: {
    msg: 'Hello Vue.',
    msg1: '',
    msg2: '',
    msg3: ''
  },
  methods: {
    changeMsg() {
      this.msg = "Hello world."