vue组件的生命周期


1、单组件生命周期
创建阶段:
beforeCreate:实例初始化后,不能获取dom。
created:vue实例已经创建,但是只是存在于js中的变量,还没开始渲染,仍不能获取dom。
挂载阶段:
beforeMount:根节点已经创建,但还是不能获取到具体的dom。
mounted:组件绘制完成,数据和dom已经渲染完成,一般数据请求放在这个阶段。
更新阶段:
beforeUpdate:vue遵循数据驱动DOM 的原则,beforeUpdate 函数在数据更新后没有立即更新数据,但是DOM 数据会改变,这是双向数据绑定的作用。
updated:这一阶段,DOM 会和更改过的内容同步。
销毁阶段:
beforeDestory:当我们不再需要 vue 操纵 DOM 时,就要销毁 vue,也就是清除vue 实例与 DOM 的关联,调用destroy方法可以销毁当前组件。在销毁前,会触发 beforeDestroy 钩子函数。
destroyed:销毁完成。

2、父子组件生命周期
挂载阶段:
父 beforeCreate --> 父 created --> 父 beforeMount --> 子 beforeCreate --> 子 created --> 子 beforeMount --> 子 mounted --> 父 mounted
更新阶段:
父 beforeUpdate --> 子 beforeUpdate --> 子 updated --> 父 updated
销毁阶段:
父 beforeDestroy --> 子 beforeDestroy --> 子 destroyed --> 父 destroyed

3、在beforeDestory阶段需要做的事

自定义事件解除绑定(eventBus)
销毁定时任务(setTimeout、setInterval等)
销毁绑定的window和document事件
vue组件间如何通信
props/$emit
①在父组件里引用子组件时用v-bind绑定要传递的属性,在子组件中用props接收。(父传子)

父组件:

 

 子组件:

 

 

②在父组件里引用子组件时用v-on绑定事件调用父组件的方法,在子组件中使用this. $emit触发事件传递参数。(子传父)

父组件

 

posted @   Thuri  阅读(1554)  评论(0编辑  收藏  举报
(评论功能已被禁用)
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· .NET Core 中如何实现缓存的预热?
· 三行代码完成国际化适配,妙~啊~
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
点击右上角即可分享
微信分享提示