vue的相关执行钩子函数及父子组件钩子函数的执行顺序

钩子函数及父子组件的执行顺序如上图所示,下面打印的mmm是在子组件当中用watch监听了一个数据变化后打印的

每一个vue示例都是先执行上面这几个函数,之后通过watch监听执行回调函数,

上图中父组件的created函数是一个异步函数(函数内部有异步)但是并不影响created函数的执行顺序。

第一个为异步函数前打印的,第二个为异步函数后打印的,

在js代码执行的时候,执行过程是单线程执行顺序,当遇到异步函数的时候,就先跳过异步函数继续执行同步函数,同步函数执行过后就会执行回调函数,

它的目的是不影响同步函数的执行,

 

转载于:https://www.cnblogs.com/song-zmin/p/11105869.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 的生命周期钩子函数指的是在组件实例化、渲染、更新和销毁等不同阶段执行的一些特定函数。下面是 Vue 组件的生命周期钩子函数及其执行顺序: 1. beforeCreate:在实例创建之前被调用。此时组件的数据和方法都还未初始化。 2. created:在实例创建成之后被调用。此时组件的数据已经初始化,但 DOM 还未渲染。 3. beforeMount:在组件挂载到 DOM 之前被调用。此时模板已经编译成,但还未挂载到页面。 4. mounted:在组件挂载到 DOM 后被调用。此时组件已经被渲染并插入到页面,可以进行 DOM 操作。 5. beforeUpdate:在数据更新之前被调用。此时组件还未重新渲染,但数据已经更新。 6. updated:在数据更新之后被调用。此时组件已经重新渲染,可以进行 DOM 操作。 7. beforeDestroy:在组件销毁之前被调用。此时组件还存在,可以进行一些清理工作。 8. destroyed:在组件销毁之后被调用。此时组件已经从 DOM 移除,事件监听和定时器等资源都已经被销毁。 对于父子组件,它们的生命周期钩子函数执行顺序如下: 1. 组件的 beforeCreate 和 created 钩子函数执行。 2. 组件的 beforeCreate 和 created 钩子函数执行。 3. 组件的 beforeMount 钩子函数执行。 4. 组件的 mounted 钩子函数执行。 5. 组件的 beforeMount 钩子函数执行。 6. 组件的 mounted 钩子函数执行。 7. 数据更新时,先执行组件的 beforeUpdate 钩子函数,然后执行组件的 beforeUpdate 钩子函数,再执行组件的 updated 钩子函数,最后执行组件的 updated 钩子函数。 8. 组件销毁时,先执行组件的 beforeDestroy 钩子函数,然后执行组件的 beforeDestroy 钩子函数,最后执行组件的 destroyed 钩子函数,再执行组件的 destroyed 钩子函数。 这是 Vue 组件生命周期钩子函数的一般执行顺序,但在实际开发可能有特殊情况,需要根据具体需求来使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值