html 数据钩子,vue.js中有多少钩子函数?

本文详细解读Vue.js中从beforeCreate到destroyed的八个核心生命周期钩子,包括它们触发时机、应用场景及如何利用这些函数优化组件管理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

460b7af5d1fd9dbc627c6446f16ff9dd.png

生命周期钩子函数其实就是vue实例的选项,这些选项的值全部都是函数,代表了该实例从出生到死亡这一生当中的各阶段,只要达到该阶段就会自动触发。生命周期的钩子函数都是同步执行的,不会有异步队列,也就是初始化实例的一瞬间全部执行完毕

vue生命周期共分为四个阶段实例创建

DOM渲染

数据更新

销毁实例

共有八个基本钩子函数

1.beforeCreate --创建前

触发的行为:vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。

在此阶段可以做的事情:加loading事件

2.created--创建后

触发的行为:vue实例的数据对象data有了,$el还没有

在此阶段可以做的事情:解决loading,请求ajax数据为mounted渲染做准备

3.beforeMount --渲染前

触发的行为:vue实例的$el和data都初始化了,但还是虚拟的dom节点,具体的data.filter还未替换

在此阶段可以做的事情:。。。

4.mounted --渲染后

触发的行为:vue实例挂载完成,data.filter成功渲染

在此阶段可以做的事情:配合路由钩子使用

5.beforeUpdate --更新前

触发的行为:data更新时触发

在此阶段可以做的事情:。。。

6.updated —更新后

触发的行为:data更新时触发

在此阶段可以做的事情:数据更新时,做一些处理(此处也可以用watch进行观测)

7.beforeDestroy —销毁前

触发的行为:组件销毁时触发

在此阶段可以做的事情:可向用户询问是否销毁

8.destroyed —销毁后

触发的行为:组件销毁时触发,vue实例解除了事件监听以及和dom的绑定(无响应了),但DOM节点依旧存在

在此阶段可以做的事情:组件销毁时进行提示

更多web前端开发知识,请查阅 HTML中文网 !!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值