尚硅谷Vue3快速上手（2024）
获课：itazs.fun/4300/
vue对生命周期的理解
Vue.js 的生命周期是指一个 Vue 实例从创建到销毁的整个过程。在这个过程中，Vue 提供了多个钩子函数（lifecycle hooks），允许开发者在实例的不同阶段插入自己的代码。这些钩子函数为开发者提供了在特定时间点执行自定义逻辑的机会。以下是 Vue.js 2.x 和 3.x 版本中生命周期钩子的详细说明：
Vue 2.x 生命周期
- beforeCreate：
- 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- 此时组件的 data 和 methods 都还未被初始化，因此无法访问。
- created：
- 在实例创建完成后被立即调用。在这一步，实例已完成数据观测、属性和方法的运算，以及 watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
- beforeMount：
- 在挂载开始之前被调用：相关的 render 函数首次被调用。
- 此时模板已在内存中编译完成，但尚未挂载到 DOM，因此无法通过 DOM API 获取元素。
- mounted：
- el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
- 此时可以通过 DOM API 访问组件。
- beforeUpdate：
- 数据更新时调用，发生在虚拟 DOM 打补丁之前。
- 这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
- updated：
- 由于数据变化导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
- 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
- beforeDestroy：
- 实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed：
- 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。
Vue 3.x 生命周期
Vue 3.x 引入了 Composition API，虽然 Options API 仍然被支持，但 Vue 3 鼓励使用 Composition API 进行更灵活和可复用的代码组织。在 Composition API 中，生命周期钩子通过 onMounted、onUpdated、onUnmounted 等函数式 API 来使用，而不是作为组件选项。
例如：
Javascript
import { onMounted, onUpdated, onUnmounted } from 'vue';
export default {
setup() {
onMounted(() => {
console.log('Component is mounted!');
});
onUpdated(() => {
console.log('Component is updated!');
});
onUnmounted(() => {
console.log('Component is unmounted!');
});
// ... other setup code
}
};
在 Vue 3 中，Options API 的生命周期钩子仍然可用，但 Vue 团队推荐使用 Composition API 来利用 Vue 3 的新特性，如更好的类型推断和更灵活的代码组织。
总之，Vue 的生命周期钩子为开发者提供了在组件生命周期的不同阶段执行自定义逻辑的能力，无论是使用 Options API 还是 Composition API，理解这些钩子对于创建高效、可维护的 Vue 应用至关重要。
