vue3.0中使用nextTick方式
更新时间：2024年04月26日 09:21:19 作者：浩星
这篇文章主要介绍了vue3.0中使用nextTick方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
这里分享3.0和2.0 的方法对比
nextTick 是将回调推迟到下一个 DOM 更新周期之后执行。
在更改了一些数据以等待 DOM 更新后立即使用它
vue3.0
1、引入
import { nextTick } from 'vue'2、具体使用，配合异步
setup() {
const message = ref('Hello!')
const changeMessage = async newMessage => {
message.value = newMessage
await nextTick()
console.log('Now DOM is updated')
}
}3、具体使用，普通
方法里：
setup () {
let otherParam = reactive({
showA:false
})
nextTick(()=>{
otherParam.showA = true
})
return {
otherParam
}
}页面上：
<a-boo v-if="otherParam.showA"></a-boo>
vue2.0
this.abc = false
this.$nextTick(() => {
//你要执行的方法
this.abc = true
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了Vue.nextTick 的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
随着前端技术的发展,TypeScript 已经成为了许多开发者的首选语言之一,因为它提供了静态类型检查,可以帮助开发者在编写代码阶段就发现错误,本文将详细介绍如何在 Vue 3 中配置 TypeScript,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了Vue2.x响应式及简单的示例，应用了简单的源代码进行讲解，感兴趣的小伙伴可以参考一下，希望可以帮助到你2021-08-08
这篇文章主要介绍了vue实现一个单独的组件注释，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
下面小编就为大家分享一篇vue2.0 子组件改变props值,并向父组件传值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue scss后缀文件background-image路径错误的解决
这篇文章主要介绍了vue scss后缀文件background-image路径错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了vue搭建本地JSON静态数据服务器全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要为大家详细介绍了vue实现登录界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了vue项目引入Iconfont图标库的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-10-10
这篇文章主要给大家介绍了关于vue中事件绑定的相关资料,事件绑定在Web开发中非常常见,我们经常需要在页面中为某个DOM元素绑定事件,如点击、鼠标移动、键盘敲击等等,需要的朋友可以参考下2023-09-09
最新评论