虚拟 dom 延时加载

解决虚拟DOM未更新【异步】对于问题

<script setup lang="ts">
import { ref, nextTick } from 'vue'

const count = ref(0)

async function increment() {
  count.value++
  const ele=document.getElementById('counter')

  await nextTick()
  // DOM 此时已经更新
  console.log(ele?.textContent) // 1
}
    </script>

    <template>
      <button id="counter" @click="increment">{{ count }}</button>
</template>

这段代码是使用Vue3的<script setup>语法进行开发的，主要实现的功能是一个点击按钮后计数器自增1，并将计数器显示在页面上。下面是对这段代码的详细讲解：

首先引入了Vue3中的ref和nextTick方法，其中ref用来定义响应式数据，而nextTick则是用来在DOM更新后执行某些操作的异步方法。

接下来使用const count = ref(0)定义了一个初始值为0的响应式数据count。

然后定义了一个名为increment()的异步函数，该函数实现了计数器自增1以及通过getElementById方法获取到计数器所在的DOM元素，接着使用await nextTick()等待DOM更新完成。由于Vue3使用了异步渲染机制，因此需要等待DOM更新完成后才能获取到最新的DOM内容。

最后，在模板中将计数器显示在了页面上，并设定了一个@click事件，当按钮被点击时会触发increment()方法自增计数器。