vue3中nextTick()应用实例详解

更新时间：2023年12月07日 15:06:36 作者：江城开朗的豌豆

这篇文章主要给大家介绍了关于vue3中nextTick()应用的相关资料,nextTick()等待下一次DOM更新刷新的工具方法,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

在Vue3中，可以使用nextTick函数来延迟执行某些操作，这些操作会在下一次DOM更新周期之后执行。这个函数通常用于在数据更新后，等待DOM更新之后执行一些操作，比如获取DOM元素的尺寸、位置等。

nextTick()

例如，以下一个切换元素显示的组件：

<template>
  <div>
    <button @click="handleClick">显示/移除</button>
    <div v-if="show" ref="content">我是一个元素</div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(true)
const content = ref()
const handleClick = () => {
  show.value = !show.value
  console.log(show.value, content.value)//true null
}
</script>

打印结果：

如果show是true，那么content是null,这意味着 DOM 与组件的数据不同步。

我们加上nextTick()

<template>
  <div>
    <button @click="handleClick">显示/移除</button>
    <div v-if="show" ref="content">我是一个元素</div>
  </div>
</template>
<script setup>
import { ref, nextTick } from 'vue'
const show = ref(true)
const content = ref()
const handleClick = () => {
  show.value = !show.value
  nextTick(() => {
    console.log(show.value, content.value)
  })
}
</script>

打印结果：

当show为true时，获取到dom。

nextTick() 与异步/等待

如果nextTick()不带参数调用，则该函数返回一个promise，该promise在组件数据更改到达 DOM 时解析。

这有助于利用更具可读性的async/await语法。如下例子：

<template>
  <div>
     <button @click="handleClick">显示/移除</button>
    <div v-if="show" ref="content">我是一个元素</div>
  </div>
</template>
<script setup>
import { ref, nextTick } from 'vue'
const show = ref(true)
const content = ref()
const handleClick = async () => {
  show.value = !show.value
   console.log(show.value, content.value)
  await nextTick()
  console.log(show.value, content.value)
}
</script>

执行结果：

总结

当你更改组件的数据时，Vue3 会异步更新 DOM。

如果你想捕捉组件数据变化后 DOM 更新的时刻，那么你需要使用nextTick(callback) 函数。

它们的单个callback参数在 DOM 更新后立即被调用：并且你可以保证获得与组件数据同步的最新 DOM。

或者，如果你不向nextTick() 提供回调参数，那么这些函数将返回一个在 DOM 更新时被解析的promise。

到此这篇关于vue3中nextTick()应用的文章就介绍到这了,更多相关vue3 nextTick()应用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vant 中van-list的用法说明
这篇文章主要介绍了vant 中van-list的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
一文了解Vue实例挂载的过程
这篇文章主要给大家介绍了关于Vue实例挂载的过程,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-03-03
vue cli3 实现分环境打包的步骤
这篇文章主要介绍了vue cli3 实现分环境打包的步骤，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2021-03-03
聊聊element-ui 侧边栏的router问题
这篇文章主要介绍了关于element-ui 侧边栏的router问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
详解Vue Cli浏览器兼容性实践
这篇文章主要介绍了详解Vue Cli浏览器兼容性实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
vue+el-menu实现菜单栏无限多层级分类
这篇文章主要为大家详细介绍了vue+el-menu实现菜单栏无限多层级分类，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
Vue动态组件与异步组件实例详解
这篇文章主要介绍了Vue动态组件与异步组件,结合实例形式分析了动态组件与异步组件相关概念、功能及使用技巧,需要的朋友可以参考下
2019-02-02
Vue.js render方法使用详解
这篇文章主要为大家详细介绍了Vue.js render方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
vue中使用jwt-decode解析token的方法
这篇文章主要介绍了vue中使用jwt-decode解析token,文末给大家补充介绍了vue通过jwt-decode解析token获取需要的数据，本文给大家介绍的非常详细，需要的朋友可以参考下
2022-06-06
Vue+ElementUI实现表单动态渲染、可视化配置的方法
这篇文章主要介绍了Vue+ElementUI实现表单动态渲染、可视化配置的方法,需要的朋友可以参考下
2018-03-03