vue3生命周期

onMounted()

注册一个回调函数,在组件挂载完成后执行。

onUpdated()

注册一个回调函数,在组件因为响应式状态变更而更新其 DOM 树之后调用。

onUnmounted()

注册一个回调函数,在组件实例被卸载之后调用。

onBeforeMount()

注册一个钩子,在组件挂载之前调用。

onBeforeUpdate()

注册一个钩子,在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

onBeforeUnmount()

注册一个钩子,在组件实例被卸载之前调用。

onErrorCaptured()

注册一个钩子,在捕获了后代组件传递的错误时调用。

onActivated()

注册一个回调函数,若组件实例是 <KeepAlive> 缓存树的一部分,当组件被插入到 DOM 中时调用。

onDeactivated()

注册一个回调函数,若组件实例是 <KeepAlive> 缓存树的一部分,当组件从 DOM 中被移除时调用。

### Vue3 生命周期详解及与 Vue2 的对比 #### 1. Vue3 生命周期的主要阶段 Vue3生命周期可以分为以下几个主要阶段,每个阶段都对应特定的生命周期钩子函数[^1]: - **创建阶段**:实例初始化时触发,涉及数据观测、事件配置和生命周期方法的初始化。 - `setup()`:在 `beforeCreate` 和 `created` 钩子之前调用,是 Composition API 的入口点[^3]。 - **挂载阶段**:实例被挂载到 DOM 上时触发。 - `onBeforeMount()`:在挂载开始之前调用。 - `onMounted()`:在挂载完成后调用。 - **更新阶段**:当组件的数据发生变化并导致重新渲染时触发。 - `onBeforeUpdate()`:在更新开始之前调用。 - `onUpdated()`:在更新完成后调用。 - **卸载阶段**:实例从 DOM 中移除时触发。 - `onBeforeUnmount()`:在卸载开始之前调用。 - `onUnmounted()`:在卸载完成后调用。 #### 2. Vue2 生命周期钩子函数 Vue2 的生命周期钩子函数总共包括 11 个,其中常用的有 8 个,按照四个阶段划分如下[^2]: - **创建阶段**: - `beforeCreate` - `created` - **挂载阶段**: - `beforeMount` - `mounted` - **更新阶段**: - `beforeUpdate` - `updated` - **卸载阶段**: - `beforeDestroy` - `destroyed` #### 3. Vue3Vue2 生命周期的对比 - **钩子名称的变化**: - Vue3 中将 `beforeDestroy` 改名为 `beforeUnmount`,`destroyed` 改名为 `unmounted`[^3]。 - **Composition API 的引入**: - Vue3 引入了 Composition API,提供了与 Options API 对应的生命周期钩子函数,例如: - `beforeCreate` 和 `created` 被替代为 `setup()`[^3]。 - 其他钩子函数通过 `onXXX` 系列方法实现,如 `onBeforeMount`、`onMounted` 等。 - **功能增强**: - Vue3生命周期钩子支持更灵活的组合使用,尤其是在 Composition API 中,开发者可以通过函数组合的方式组织逻辑[^3]。 #### 4. 示例代码对比 ```javascript // Vue2 示例 new Vue({ data() { return { message: &#39;Hello Vue2&#39; }; }, beforeMount() { console.log(&#39;beforeMount in Vue2&#39;); }, mounted() { console.log(&#39;mounted in Vue2&#39;); } }); // Vue3 示例 (Options API) import { defineComponent } from &#39;vue&#39;; export default defineComponent({ data() { return { message: &#39;Hello Vue3&#39; }; }, beforeMount() { console.log(&#39;beforeMount in Vue3&#39;); }, mounted() { console.log(&#39;mounted in Vue3&#39;); } }); // Vue3 示例 (Composition API) import { defineComponent, onBeforeMount, onMounted } from &#39;vue&#39;; export default defineComponent({ setup() { onBeforeMount(() => { console.log(&#39;onBeforeMount in Vue3&#39;); }); onMounted(() => { console.log(&#39;onMounted in Vue3&#39;); }); return {}; } }); ``` #### 5. 使用场景 - **Vue2**:适合传统项目迁移或对 Composition API 不熟悉的开发者。 - **Vue3**:更适合需要复杂状态管理和逻辑复用的场景,尤其是通过 Composition API 提供的灵活性[^1]。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值