在Vue开发中如何延迟几秒钟运行指定函数?

        有两种方法,一种是JavaScript的setTimeOut方法,一种是this.$nextTick(function(){})方法。 两种的区别是setTimeOut可以设置时间后再进行渲染,this.$nextTick(function(){})可以在vue组件自动渲染后调用。

setTimeOut

//在3000毫秒后跳出弹窗‘‘对不起, 要你久候’’

setTimeout("alert('对不起, 要你久候')", 3000 )

this.$nextTick(function(){})

//在页面dom渲染完成后弹出弹窗‘‘我来的刚刚好吧’’

 this.$nextTick(function () {
            this.$refs.message.success('我来的刚刚好吧')
          })

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 ,钩子函数的使用方式与 Vue 2 有所不同。Vue 3 的钩子函数被称为生命周期钩子函数,它们被视为应用程序从创建到销毁的生命周期事件。 以下是 Vue 3 最常用的一些生命周期钩子函数: 1. `beforeCreate`:在实例初始化之后,数据观测和事件配置之前被调用。 2. `created`:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测,属性和方法的运算,watch/event 事件回调。 3. `beforeMount`:在挂载开始之前被调用:相关的 render 函数首次被调用。 4. `mounted`:实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了。 5. `beforeUpdate`:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。 6. `updated`:由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。 7. `beforeUnmount`:实例销毁之前调用。在这一步,实例仍然完全可用。 8. `unmounted`:实例销毁后调用。 在组件内部定义生命周期钩子函数非常简单,只需要在组件的 `setup` 函数使用 `onXXX` 的命名方式即可。例如,在组件定义 `beforeMount` 钩子函数的方式如下: ``` import { onBeforeMount } from 'vue'; export default { setup() { onBeforeMount(() => { console.log('before mount'); }); } } ``` 需要注意的是,在 Vue 3 ,`created` 钩子函数无法访问到 this 上下文,因为它在组件实例化之前被调用。如果需要访问组件实例,请使用 `getCurrentInstance()` 函数获取当前组件实例。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值