生命周期函数

生命周期让我们在控制整个vue时更容易形成更好的逻辑,可以分为三个阶段,挂载阶段,更新阶段,销毁阶段

分别有:

创建前:beforeCreate() 只有一些实例本身的事件和生命周期函数

创建后:Created() 是最早使用data和methods中数据的钩子函数

挂载前:beforeMount() 指令已经解析完毕,内存中已经生成dom树

挂载后:Mounted() dom渲染完毕页面和内存的数据已经同步

更新前:beforeUptate() 当data的数据发生改变会执行这个钩子,内存中的数据是新的,页面是旧的

更新后:Updated() 内存和页面都是新的

销毁前:beforeDestroy() 即将销毁data和methods中的数据此时还是可以使用的,可以做一些释放内存的操作

销毁后:Destroyed() 已经销毁完毕

组件激活时 activated   失活时 deactivated 

errorcaptured 
综上所述  先执行的是父组件再执行子组件

当然  vue3.0 的生命周期也做了一些改动

beforeCreate  -> setup() 开始创建组件之前,创建的是data和method

created       -> setup()

beforeMount   -> onBeforeMount 组件挂载到节点上之前执行的函数。

mounted       -> onMounted 组件挂载完成后执行的函数

beforeUpdate  -> onBeforeUpdate 组件更新之前执行的函数。

updated       -> onUpdated 组件更新完成之后执行的函数。

beforeDestroy -> onBeforeUnmount 组件挂载到节点上之前执行的函数。

destroyed     -> onUnmounted 组件卸载之前执行的函数。

### 生命周期函数的概念 生命周期函数是指在特定对象或组件的不同阶段自动触发的特殊方法。这些函数允许开发者在不同时间点执行自定义逻辑,从而更好地控制应用程序的行为和发展过程。 #### 定义与特性 生命周期函数也被称为生命周期回调函数或者生命周期钩子[^2]。这类函数的特点在于它们不是由开发人员直接调用而是当满足一定条件时由框架或运行环境自动触发。例如,在微信小程序中,页面加载完成之后会自动触发`onLoad()`这样的生命周期函数来初始化数据或其他操作[^1]。 #### 作用范围 对于不同的平台和技术栈而言,生命周期函数的作用范围有所不同: - **页面级别**:针对单个页面的有效期内发生的事件处理,比如微信小程序中的页面显示隐藏、初次渲染等时刻都会触发相应的生命周期函数;此级别的生命周期通常只影响当前页面实例内的状态管理。 - **应用级别**:涉及整个应用程序层面的状态变化通知机制,像启动、关闭等活动均属于此类别下的典型场景;该类别的生命周期覆盖更广的时间跨度以及更多的功能模块之间的交互协调工作。 - **局部变量 vs 全局变量**:从另一个角度讲,还可以依据变量的作用域讨论其对应的“小周期”。局部变量仅在其所在代码块被执行期间有效而全局变量则贯穿于整个程序始终存在直至结束为止[^3]。 - **组件内部**:特别是在现代前端框架里(如Vue.js, React),组件拥有自己独立的一套完整的生命周期流程,包括挂载前准备(`beforeMount`)、首次绘制完成后(`mounted`)等一系列重要环节,并且可以通过配置项指定新旧两版形式之一实现具体行为定制化需求[^4]。 ```javascript // 微信小程序页面示例 Page({ onLoad(options){ console.log('页面被加载'); }, onShow(){ console.log('页面显示'); } }) ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值