你了解 Vue 的生命周期吗？

Vue 生命周期是指 Vue 实例或组件从初始化、挂载、更新到销毁的整个过程中的一系列阶段。在这个过程中，Vue 提供了一系列生命周期钩子函数（Lifecycle Hooks），允许开发者在特定时机插入自定义逻辑，例如数据获取、DOM 操作、资源清理等。掌握这些有助于理解和控制 Vue 的应用行为、性能和维护性。生命周期主要分为四个核心阶段（创建、挂载、更新、销毁），共包含 8 个主要的钩子函数。

主要生命周期阶段和钩子详解

1. 创建阶段
   • 包含两个钩子函数：
     • beforeCreate：在实例初始化后、数据观测和事件配置之前触发。此时，组件的 data 和 methods 未被初始化，无法访问这些属性。
     • created：在实例创建完成时触发。已完成数据观测、属性和方法的初始化；可以访问 data、computed、methods 等属性，但 DOM 尚未挂载（$el 不可用）。适合进行异步数据请求（例如 API 调用）或依赖数据初始化。
   • 示例代码：

     export default {
       data() {
         return {
           message: 'Hello, Vue!'
         }
       },
       beforeCreate() {
         console.log('beforeCreate:', this.message) // undefined
       },
       created() {
         console.log('created:', this.message) // 'Hello, Vue!'
       }
     }
     

2. 挂载阶段
   • 包含两个钩子函数：
     • beforeMount：模板编译完成（虚拟 DOM 创建）、DOM 挂载之前触发。可以访问组件数据，但渲染尚未完成。
     • mounted：DOM 挂载到页面后触发。此时可以访问元素 DOM，适合操作第三方库（如使用 jQuery 操纵元素）或 DOM 相关初始化。开发者应注意避免过多的同步 DOM 操作以免影响性能。
   • 适用场景：页面加载后的自动渲染处理或外部接口调用。
   • 示例代码：

     export default {
       mounted() {
         console.log('mounted:', this.$el) // access real DOM element
         const el = document.getElementById('my-element')
         el.classList.add('loaded')
       }
     }
     

3. 更新阶段
   • 包含两个钩子函数（仅在数据更改引发虚拟 DOM 更新时才触发）：
     • beforeUpdate：在响应式数据改变后、虚拟 DOM 打补丁（Patch）之前触发。可以在此时访问旧 DOM 状态进行临时操作。但应避免在此修改数据以防无限循环。
     • updated：DOM 更新完成后触发。适用于依赖更新后 DOM 的操作（例如滚动位置处理）。同样应避免此阶段修改状态来防止递归更新问题。
   • 常见用途：表单验证或动态 UI 微调。
4. 销毁阶段
   • 包含两个钩子函数：
     • beforeDestroy：在实例销毁之前调用，组件仍完全可用。在此清理工作（如移除事件监听器、销毁定时器）是推荐操作。
     • destroyed：实例销毁后触发。所有绑定已被解除，组件方法、属性和 DOM 均不可访问。适合资源释放和全局状态的注销。
   • 示例场景：离开组件页面前的会话清理工作。

注意事项

• 适用生命周期：根据业务需求选择钩子函数；例如数据初始用 created，动态页面渲染用 mounted。
• 父子组件顺序：在父组件中，生命钩子执行按渲染流程：父级钩子在挂载后优先，子级挂在中间。
• Vue 2 vs Vue 3：本回答针对 Vue 2.x；在 Vue 3 中部分钩子更名为（如 beforeDestroy 成 beforeUnmount）。