vue生命周期

一 vue3生命周期

Vue 生命周期是指 Vue 组件从创建到销毁的整个过程。在这个过程中，组件经历了一系列的阶段，每个阶段都有其特定的生命周期钩子函数，这些钩子函数允许你在不同的阶段插入自定义逻辑。理解 Vue 生命周期有助于你更好地管理组件的状态和行为。

Vue2的生命周期

创建阶段：beforeCreate、created

挂载阶段：beforeMount、mounted

更新阶段：beforeUpdate、updated

销毁阶段：beforeDestroy、destroyed
Vue3的生命周期

创建阶段：setup

挂载阶段：onBeforeMount、onMounted

更新阶段：onBeforeUpdate、onUpdated

卸载阶段：onBeforeUnmount、onUnmounted

1 创建阶段

1.1 setup:

组件创建时调用，作为组件的入口点。
在此函数中，可以定义响应式数据、计算属性和方法。
在 setup 中，无法访问 this，所有属性和方法都需直接返回。

2 挂载阶段

2.1 onBeforeMount()

在组件挂载之前被调用。
适合进行最后的准备工作，比如初始化外部库。
作用：在组件挂载之前调用。此时，组件还未被插入到 DOM 中。
使用场景：适用于初始化一些操作，但这些操作不依赖于 DOM 的渲染，比如准备数据等。

 onBeforeMount(()=>{console.log('挂载之前')})

2.2 onMounted()

组件挂载完成后调用。
适合执行需要 DOM 的操作，例如获取 DOM 元素或绑定事件。
作用：在组件挂载完成后调用。此时，组件已被插入到 DOM 中，可以进行对 DOM 的操作或进行网络请求。
使用场景：适合执行需要依赖于 DOM 已经渲染完成的操作，如操作 DOM、获取数据等。

  onMounted(() => {console.log('Component has been mounted');});

3 更新阶段

3.1 onBeforeUpdate()

在数据更新之前调用。
可以在此阶段访问到更新前的状态，适合进行一些状态检查或准备工作。

作用：在组件数据更新之前调用。此时，组件尚未重新渲染。

使用场景：用于在数据更新前执行某些操作，例如记录数据变化的前后状态，或准备更新前的逻辑。

  onBeforeUpdate(()=>{console.log('更新之前')})

3.2 onUpdated()

数据更新完成后调用。
适合执行在更新后需要进行的操作，例如重新计算某些值或更新外部依赖。

作用：在组件数据更新之后调用。此时，组件已经重新渲染完成。

使用场景：适合在组件更新完成后进行操作，如处理与更新后的 DOM 状态相关的逻辑，或者进行依赖于更新后的数据的操作。

 onUpdated(() => {console.log('Component has been updated');});

4 卸载阶段

4.1 onBeforeUnmount()

在组件卸载之前调用。
适合进行清理工作，例如取消事件监听或释放资源。

作用：在组件卸载之前调用。此时，组件仍然存在于 DOM 中。
使用场景：用于执行清理工作，比如移除事件监听器、清除定时器等。

 onBeforeUnmount(()=>{console.log('卸载之前')})

4.2 onUnmounted()

组件卸载完成后调用。
适合执行一些收尾工作，如记录日志或清理外部库的实例。
作用：在组件卸载完成后调用。此时，组件已经从 DOM 中被移除。
使用场景：适合做一些卸载后的清理工作，例如取消网络请求、清除数据等。

 onUnmounted(() => {console.log('Component has been unmounted');});

这些生命周期钩子函数使你能够在 Vue 组件的不同阶段执行代码，从而实现更复杂和更有控制的组件行为。这种机制帮助开发者管理组件的状态和副作用，使得组件更加健壮和可维护。

二 vue2 生命周期

1 beforeCreate:

组件实例刚被创建，数据和事件尚未设置。你不能访问 data 和 computed 属性。

2 created:

实例已创建，数据观测已完成，此时可以访问 data、computed 和 methods。通常在这里进行数据初始化或 API 调用。

3 beforeMount:

组件即将挂载到 DOM 上，render 函数尚未被调用。这是最后一次更改数据的机会。

4 mounted:

组件挂载完成后，所有的 DOM 元素均可用。适合进行 DOM 操作、启动定时器或请求数据。

5 beforeUpdate:

组件的数据发生变化，但虚拟 DOM 尚未更新。这时你可以对即将发生的更新做准备。

6 updated:

数据更新导致虚拟 DOM 重新渲染和更新后被调用。此时，DOM 已经更新，你可以进行依赖于最新 DOM 的操作。

7 beforeDestroy:

实例销毁之前调用，此时可以进行清理工作，如取消订阅、清除定时器等。

8 destroyed:

实例销毁后调用，所有的事件监听器和子实例均已被移除，适合进行最后的清理。

9 父组件和子组件的生命周期钩子函数执行顺序

在 Vue 中，父组件和子组件的生命周期钩子函数执行顺序大致如下：

父组件的 beforeCreate

此时父组件尚未初始化，数据和事件都不可用。
父组件的 created

父组件实例已创建，数据和事件已初始化，但 DOM 尚不可用。
父组件的 beforeMount

此时，父组件即将挂载，模板已经编译，但还没有添加到 DOM。
子组件的 beforeCreate

子组件实例开始创建，数据和事件未初始化。
子组件的 created

子组件已创建，数据和事件初始化完成，但 DOM 尚不可用。
子组件的 beforeMount

子组件即将挂载，模板已准备好，但还未渲染到 DOM。
子组件的 mounted

子组件已挂载，能够访问到 DOM。
父组件的 beforeMount

在子组件挂载之后，父组件即将完成挂载。
父组件的 mounted

父组件已完全挂载，此时可以访问所有子组件的 DOM。

对于更新和卸载的阶段：

父组件的 beforeUpdate

当父组件的响应式数据变化后，此钩子在 DOM 更新之前被调用。适合在这里做一些状态准备或逻辑处理。
子组件的 beforeUpdate

紧接着，子组件的 beforeUpdate 被调用。此时可以进行准备工作，例如清理状态或计算。
子组件的 updated

子组件的 DOM 更新完成后，调用 updated 钩子。在这里可以执行需要依赖于最新 DOM 的逻辑。
父组件的 updated

最后，父组件的 updated 钩子被调用，表明父组件的更新已经完成。

卸载时：

父组件的 beforeUnmount

当父组件被销毁时，首先调用其 beforeUnmount 钩子。在这里可以进行清理工作，例如取消定时器、解绑事件等。

子组件的 beforeUnmount

接着，子组件的 beforeUnmount 被调用。这里也可以进行必要的清理，确保不会造成内存泄漏。

子组件的 unmounted

子组件完成销毁后，调用 unmounted 钩子。此时，子组件已完全卸载，所有状态和事件监听器已被移除。

父组件的 unmounted

最后，父组件的 unmounted 钩子被调用，表示父组件的销毁已完成。

这个顺序确保了子组件总是先于父组件进行创建、挂载和卸载，同时在更新阶段，子组件会先于父组件进行更新

三 Vue 2 和 Vue 3 生命周期的详细区别和特点：

1. 生命周期钩子名称和使用方式

Vue 2 生命周期钩子

created: 实例被创建后调用，适合进行数据初始化。
mounted: DOM 挂载完成后调用，适合进行 DOM 操作。
updated: 组件更新后调用，适合响应数据变化。
destroyed: 组件销毁前调用，适合清理事件监听器和定时器。

Vue 3 生命周期钩子

setup(): 在组件实例创建之前调用，是组合式 API 的入口。
onBeforeMount: 在组件挂载之前调用，适合做准备工作。
onMounted: 组件挂载后调用，适合进行 DOM 操作。
onBeforeUpdate: 组件更新之前调用，适合保存状态。
onUpdated: 组件更新后调用。
onBeforeUnmount: 组件卸载之前调用，适合清理工作。
onUnmounted: 组件卸载后调用。

2 this 上下文

Vue 2: 在生命周期钩子中，this 指向组件实例，可以直接访问 data、props 和 methods。

Vue 3: 在 setup() 中，this 是 undefined，必须通过函数参数访问 props 和 context。这使得组合式 API 更加函数化，减少了对 this 的依赖。

3. 响应式数据管理

Vue 2: 使用 data 选项声明响应式状态，必须通过 this 访问。

Vue 3: 使用 reactive() 和 ref() API 创建响应式状态，增强了灵活性。例如，可以在 setup() 中直接创建和使用响应式数据。

4. 性能优化

Vue 3: 由于使用了更高效的虚拟 DOM 和代理机制，生命周期钩子的调用效率更高，组件更新性能得到了显著提升。

5. 组合式 API

Vue 2: 使用选项式 API，组件逻辑通过不同的选项分开定义。

Vue 3: 支持组合式 API，可以将相关逻辑组合到一起，提升了代码的可重用性和可读性。例如，可以将不同的生命周期逻辑放在同一个 setup() 函数中，使得组件更加模块化。

6 总结

灵活性: Vue 3 的组合式 API 使得生命周期管理更灵活。
清晰性: 更清晰的钩子名称，便于理解每个阶段的执行时机。
性能: 通过优化，提高了性能和响应速度。