vue2的生命周期函数有哪些,运行思路是什么?

 常用的8个

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

created():实例创建之后  可以获取到data里面的数据和调用methods里面的方法了。

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

mounted():实例挂载后  dom已经更新数据并且渲染页面。

beforeUpdate():实例更新之前 : 数据改变,视图更新之前。

updated():视图更新之后  数据和页面都是更新之后的。

beforeDestory():实例销毁之前  

destoryed():实例销毁  页面关闭,实例完全销毁。

不常用的有三个  但是也要记住

activated    实例被激活时使用,用于重复激活一个实例的时候。

deactivated   实例没有被激活时。

errorCaptured   当捕获到子组件的错误时调用。

### Vue 3 生命周期详解 Vue 3 的生命周期描述了一个组件从创建到销毁的过程,在这个过程中,开发者可以通过不同的钩子函数来执行特定的操作。相比于 Vue 2Vue 3 提供了更灵活的方式——`setup` 函数,允许在 Composition API 下使用生命周期钩子。 #### 组件生命周期的主要阶段 1. **创建阶段 (Before Creation)** 钩子:`onBeforeMount` 描述:当组件实例初始化完成但在挂载 DOM 节点之前调用。此时模板尚未渲染[^1]。 2. **挂载阶段 (Mounted)** 钩子:`onMounted` 描述:当组件已经成功挂载到 DOM 上并可以访问真实 DOM 元素时触发。这是发起网络请求或操作 DOM 的理想时机[^2]。 3. **更新阶段 (Updated)** 钩子:`onBeforeUpdate`, `onUpdated` - `onBeforeUpdate`: 当数据变化导致视图重新渲染前调用。 - `onUpdated`: 数据变化后的视图完全更新后调用。注意避免在此处修改状态以免引发无限循环[^3]。 4. **卸载阶段 (Unmounted)** 钩子:`onBeforeUnmount`, `onUnmounted` - `onBeforeUnmount`: 卸载组件之前的最后一个机会清理资源(如定时器、事件监听器等)。 - `onUnmounted`: 完全移除组件之后调用,通常无需额外逻辑处理。 5. **错误捕获** 钩子:`onErrorCaptured` 描述:用于捕捉来自后代组件的错误,提供了一种集中管理异常的机会。 --- ### 在 Setup 中使用生命周期钩子的示例 以下是基于 Vue 3 和 Composition API 使用生命周期钩子的一个完整例子: ```javascript <template> <div>{{ message }}</div> </template> <script> import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onErrorCaptured } from 'vue'; export default { setup() { const message = ref('Hello, Vue 3!'); // Before Mount Hook onBeforeMount(() => { console.log('Component is about to mount...'); }); // Mounted Hook onMounted(() => { console.log('Component has been mounted!'); }); // Before Update Hook onBeforeUpdate(() => { console.log('Component is about to update...'); }); // Updated Hook onUpdated(() => { console.log('Component has been updated!'); }); // Error Captured Hook onErrorCaptured((error) => { console.error('An error occurred:', error); return true; // 返回true继续传播错误;false阻止进一步传播 }); setTimeout(() => { message.value = 'Message changed!'; }, 2000); return { message }; } }; </script> ``` 上述代码展示了如何利用 `setup` 方法注册多个生命周期钩子,并通过控制台日志观察其运行顺序。 --- ### 总结 Vue 3 的生命周期钩子不仅保留了传统 Options API 的功能特性,还借助 Composition API 实现更加模块化的设计思路。这使得复杂业务场景下的代码组织更为清晰高效。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值