Vue 3 与 Vue 2 的生命周期有很多相似之处，但也有明显的变化。Vue 3 对生命周期钩子做了重命名和优化，使得生命周期更加灵活，特别是在组合式 API 中。以下是 Vue 3 和 Vue 2 的生命周期对比、使用时机、以及常见使用场景。
Vue 2 生命周期
在 Vue 2 中，生命周期钩子如下：
- ：实例刚创建时调用，数据和事件还未初始化。
- ：实例创建完成，数据和事件已完成初始化，但尚未挂载到 DOM 上。
- ：模板已经编译，挂载前调用，DOM 还未渲染。
- ：实例挂载完成，模板编译生成的 DOM 已插入页面。
- ：响应式数据更新时触发，DOM 尚未更新。
- ：组件 DOM 更新完成后调用。
- ：<keep-alive> 组件激活时调用。
- ：<keep-alive> 组件停用时调用。
- ：组件销毁前调用。
- ：组件销毁完成。
Vue 3 生命周期
Vue 3 的生命周期与 Vue 2 类似，但重命名了一些钩子以适应组合式 API。以下是 Vue 3 的生命周期钩子：
- ：组合式 API 的初始化阶段，用于创建响应式数据、定义方法等。
- （相当于 Vue 2 的 ）：DOM 未挂载。
- （相当于 Vue 2 的 ）：DOM 已挂载。
- （相当于 Vue 2 的 ）：数据更新，DOM 未更新。
- （相当于 Vue 2 的 ）：数据更新后 DOM 已更新。
- （相当于 Vue 2 的 ）：组件销毁前。
- （相当于 Vue 2 的 ）：组件销毁后。
- ：<keep-alive> 组件激活。
- ：<keep-alive> 组件停用。
此外，Vue 3 引入了一些新的生命周期钩子函数，提供更灵活的控制：
- ：用于追踪组件的渲染依赖。
- ：当组件重新渲染时触发，调试渲染性能非常有用。
使用时机与场景
1. 数据初始化：（Vue 2） / （Vue 3）
- Vue 2： 阶段用于初始化数据、调用 API 等操作。
- Vue 3：在组合式 API 中使用 ，可以直接定义 或 变量，同时可以进行异步操作，如调用 API 获取数据。
示例：
2. DOM 操作：
钩子在 Vue 2 和 Vue 3 中都有，但 Vue 3 中的组合式 API 使用 。
- Vue 2：可以在 中直接获取 DOM 节点。
- Vue 3：通过 钩子进行 DOM 操作，适合对渲染后的 DOM 进行操作。
示例：
3. 组件更新： 和
- Vue 2： 和 钩子分别在更新前和更新后触发，适用于需要监听和处理数据变化的情况。
- Vue 3：通过 和 实现类似效果。
示例：
4. 组件销毁： 和 （Vue 2） / 和 （Vue 3）
- Vue 2：在 中可以做一些清理工作，比如移除事件监听器或销毁定时器。
- Vue 3： 和 用于相同场景，且支持组合式 API 的写法。
示例：
5. 依赖追踪： 和 （Vue 3 特有）
Vue 3 新增的 和 ，适合在调试中使用，帮助开发者了解组件渲染的依赖关系，找出潜在性能问题。
示例：
Vue 3 和 Vue 2 生命周期钩子的总结对比
在 Vue 3 中，组合式 API 带来了更高的灵活性，支持更加简洁的生命周期钩子函数，同时还允许在 阶段完成更多初始化工作。
在 Vue 中，父子组件的生命周期钩子执行顺序在组件创建、更新、销毁的过程中有不同的执行方式。了解父子组件的生命周期钩子执行顺序有助于在复杂组件间的状态传递、事件监听等操作中更好地控制和优化代码。
父子组件生命周期钩子执行顺序
以下是 Vue 3 和 Vue 2 中父子组件的生命周期钩子执行顺序的对比说明。
1. 组件的创建过程
在组件创建时，Vue 3 和 Vue 2 的父子组件生命周期钩子的执行顺序是相同的，遵循“父 beforeCreate -> 子 beforeCreate -> 子 created -> 父 created”的方式。详细执行顺序如下：
- 父组件的 ：父组件实例刚创建，数据和事件尚未初始化。
- 父组件的 ：父组件实例已创建完成，数据和事件初始化完成。
- 子组件的 ：子组件实例创建。
- 子组件的 ：子组件初始化完成。
- 子组件的 ：模板编译完成，但 DOM 未挂载。
- 子组件的 ：子组件完成挂载，DOM 插入页面。
- 父组件的 ：父组件模板编译完成，准备挂载。
- 父组件的 ：父组件挂载完成，整个组件树的初次渲染完成。
总结执行顺序：
- 父 -> 父
- 子 -> 子 -> 子 -> 子
- 父 -> 父
示例代码：
输出顺序：
2. 组件更新过程
在组件更新过程中，由于子组件的变化会影响父组件，所以更新顺序从“父 ”开始。
- 父组件的 ：父组件的响应式数据更新后，准备重新渲染。
- 子组件的 ：子组件的响应式数据更新，准备重新渲染。
- 子组件的 ：子组件更新完成，新的 DOM 已插入。
- 父组件的 ：父组件更新完成。
总结执行顺序：
- 父 -> 子 -> 子 -> 父
示例代码：
在以下示例中，父组件中的 变化会触发父子组件的更新。
输出顺序（点击按钮后）：
3. 组件销毁过程
当父组件或子组件被销毁时，它们的生命周期钩子执行顺序为“父 -> 子 -> 子 -> 父 ”。
- 父组件的 ：父组件销毁前触发。
- 子组件的 ：子组件销毁前触发。
- 子组件的 ：子组件销毁完成。
- 父组件的 ：父组件销毁完成。
总结执行顺序：
- 父 -> 子 -> 子 -> 父
示例代码：
在以下示例中，点击按钮销毁子组件。
输出顺序（销毁子组件后）：
总结
- Vue 3 在销毁阶段，重命名了销毁相关的生命周期钩子为 和 ，并支持组合式 API。
- 父子组件的生命周期顺序在组件创建、更新和销毁阶段的钩子触发顺序在 Vue 3 和 Vue 2 中是基本一致的。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/14256.html