vue3基础知识》学习笔记Day27-（Period2）通用API之nextTick()

sameen1900

已于 2023-02-21 09:16:20 修改

阅读量93

点赞数

文章标签：学习前端 javascript

于 2023-02-20 23:40:00 首次发布

本文链接：https://blog.csdn.net/qq_38526167/article/details/129134085

版权

nextTick() 主要用来解决DOM更新不同步的问题，因为大多数我们请求的后端数据是异步的，所以当数据回来时，DOM 已经被渲染完了，所以为了解决这个问题，可以用到nextTick()

<script setup>
import { ref, nextTick } from 'vue'

const count = ref(0)

async function increment() {
  count.value++

  // DOM 还未更新
  console.log(document.getElementById('counter').textContent) // 0

  await nextTick()
  // DOM 此时已经更新
  console.log(document.getElementById('counter').textContent) // 1
}
</script>

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