vue3的 nextTick()的使用

引言:

当你修改了响应式状态时,DOM 会被自动更新。但是需要注意的是,DOM 更新不是同步的。Vue 会在"next tick"更新周期中缓冲所有状态的修改,以确保不管你进行了多少次状态修改,每个组件都只会被更新一次。

要等待 DOM 更新完成后再执行额外的代码,可以使用 nextTick() 全局 API:

复制代码
import { nextTick } from 'vue'

async function increment() {
  count.value++
  await nextTick()
  // 现在 DOM 已经更新了
}

一句话,总结一下就是:当数据更新以后,在dom中完成渲染之后,自动执行该函数。

nextTick() 等待下一次DOM更新刷新的工具方法。nextTick()可以在状态改变后立即使用,以等待DOM更新完成。你可以传递一个回调函数作为参数,或者await返回的Promise。

复制代码
<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>

或者

复制代码
<script setup>
import { ref, nextTick } from 'vue'

const count = ref(0)

async function increment() {
  count.value++

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

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

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

需要注意的是,虽然 nextTick() 方法可以解决异步更新导致的问题,但如果过度使用该方法会导致性能问题。因此,在实际开发中,只有在必要的情况下才应该使用 nextTick() 方法。

参考传送门:[5.7 Vue中this.nextTick()方法的使用及代码示例-CSDN博客](https://blog.csdn.net/qq_40805441/article/details/130860183 "5.7 Vue中this.nextTick()方法的使用及代码示例-CSDN博客")

相关推荐
用户28003832908403 分钟前
升级Vue3.4+版本,ant-design-vue 3.x 版本的Modal函数方式无法关闭问题
vue.js
toooooop85 分钟前
本地开发环境webScoket调试,保存html即用
前端·css·websocket
山有木兮木有枝_11 分钟前
手动封装移动端下拉刷新组件的设计与实现
前端
阳光阴郁大boy13 分钟前
大学信息查询平台:一个现代化的React教育项目
前端·react.js·前端框架
小菜全19 分钟前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
AlexMercer101222 分钟前
[前端]1.html基础
前端·笔记·学习·html
白水清风31 分钟前
关于Js和Ts中类(class)的知识
前端·javascript·面试
小菜全41 分钟前
uniapp基础组件概述
前端·css·vue.js·elementui·css3
小天呐1 小时前
qiankun 微前端接入实战
前端·js·微前端
周航宇JoeZhou1 小时前
JP4-7-MyLesson后台前端(五)
java·前端·vue·elementplus·前端项目·mylesson·管理平台