vue 生命周期的11个阶段及其作用解析

Vue.js 是一个流行的前端框架，广泛用于构建用户界面。它的生命周期钩子函数允许开发者在组件的不同阶段执行代码。Vue.js 有11个主要的生命周期钩子函数，分别是 1、beforeCreate，2、created，3、beforeMount，4、mounted，5、beforeUpdate，6、updated，7、activated，8、deactivated，9、beforeDestroy，10、destroyed，11、errorCaptured。这些钩子函数为开发者提供了在组件的不同阶段插入自定义逻辑的机会，从而提升了开发的灵活性和控制力。

一、beforeCreate、created

1. beforeCreate

   • 定义：在实例初始化之后，数据观测 (data observation) 和事件配置之前调用。
   • 作用：此阶段无法访问 data、computed、methods 和 watch。常用于初始化一些非响应式属性或简单的日志记录。
   • 示例：

     beforeCreate() {
     
       console.log('beforeCreate: Component instance is being initialized.');
     }
     

2. created

   • 定义：实例已经创建完成，属性已绑定，但 DOM 还未生成，$el 属性还不可用。
   • 作用：在此阶段，可以访问 data、computed、methods 和 watch。常用于发送 HTTP 请求或初始化数据。
   • 示例：

     created() {
     
       console.log('created: Component instance has been created.');
       this.fetchData(); // 假设 fetchData 是一个方法
     }
     

二、beforeMount、mounted

3. beforeMount

   • 定义：在挂载开始之前被调用，相关的 render 函数首次被调用。
   • 作用：此阶段还未生成 DOM 元素，可以在这里进行最后的检查或调整。
   • 示例：

     beforeMount() {
     
       console.log('beforeMount: Component is about to be mounted.');
     }
     

4. mounted

   • 定义：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换，挂载到实例上。
   • 作用：此阶段 DOM 元素已生成，可以在这里进行依赖于 DOM 的操作。
   • 示例：

     mounted() {
     
       console.log('mounted: Component has been mounted.');
       this.initializeUIComponents(); // 假设 initializeUIComponents 是一个方法
     }
     

三、beforeUpdate、updated

5. beforeUpdate

   • 定义：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   • 作用：在更新之前，可以对现有的状态进行某些操作或检查。
   • 示例：

     beforeUpdate() {
     
       console.log('beforeUpdate: Component is about to be updated.');
     }
     

6. updated

   • 定义：由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
   • 作用：此阶段可以访问更新后的 DOM，常用于依赖 DOM 更新的操作。
   • 示例：

     updated() {
     
       console.log('updated: Component has been updated.');
       this.refreshCharts(); // 假设 refreshCharts 是一个方法
     }
     

四、activated、deactivated

7. activated

   • 定义：keep-alive 组件激活时调用。
   • 作用：当组件从缓存中激活时触发，常用于需要恢复组件状态的操作。
   • 示例：

     activated() {
     
       console.log('activated: keep-alive component has been activated.');
       this.resumeTasks(); // 假设 resumeTasks 是一个方法
     }
     

8. deactivated

   • 定义：keep-alive 组件停用时调用。
   • 作用：当组件被缓存时触发，常用于暂停或保存组件状态的操作。
   • 示例：

     deactivated() {
     
       console.log('deactivated: keep-alive component has been deactivated.');
       this.pauseTasks(); // 假设 pauseTasks 是一个方法
     }
     

五、beforeDestroy、destroyed

9. beforeDestroy

   • 定义：实例销毁之前调用。在这一步，实例仍然完全可用。
   • 作用：在此阶段可以进行清理工作，如清除计时器、取消订阅等。
   • 示例：

     beforeDestroy() {
     
       console.log('beforeDestroy: Component is about to be destroyed.');
       this.cleanup(); // 假设 cleanup 是一个方法
     }
     

10. destroyed

    • 定义：实例销毁后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。
    • 作用：此阶段可以进行最后的清理工作，以确保没有遗留的资源占用。
    • 示例：

      destroyed() {
      
        console.log('destroyed: Component has been destroyed.');
      }
      

六、errorCaptured

11. errorCaptured
    • 定义：当捕获一个来自子孙组件的错误时调用。此钩子也会捕获组件自身的错误。
    • 作用：可以用来报告或处理错误，防止应用崩溃。
    • 示例：

      errorCaptured(err, vm, info) {
      
        console.log('errorCaptured: An error has been captured.');
        // 可以在这里发送错误日志到服务器
        return false; // 如果希望错误继续向上传递
      }
      

总结起来，Vue.js 提供的这 11 个生命周期钩子函数允许开发者在组件的不同阶段插入代码，从而更好地控制组件的行为和状态。通过合理利用这些钩子函数，开发者可以优化应用性能，增强用户体验，并确保代码的可维护性和可扩展性。

进一步建议：

1. 熟悉每个生命周期钩子：理解每个钩子的触发时机和用途，选择最合适的钩子来实现需求。
2. 避免滥用钩子：不要在钩子中执行过多的操作，尽量保持代码简洁。
3. 善用 keep-alive 组件：在合适的场景下使用 keep-alive 组件来提升性能，但要注意管理组件的状态。

更多问答FAQs：

1. Vue生命周期是什么？

Vue生命周期是指在Vue实例创建、挂载、更新和销毁过程中所经历的一系列阶段。通过这些生命周期钩子函数，我们可以在不同的阶段执行相应的代码，实现对数据的操作和状态的管理。

2. Vue有多少个生命周期钩子函数？

Vue一共有11个生命周期钩子函数，它们按照执行顺序分为三个阶段：创建阶段、更新阶段和销毁阶段。

• 创建阶段：beforeCreate、created、beforeMount、mounted
• 更新阶段：beforeUpdate、updated
• 销毁阶段：beforeDestroy、destroyed
• 渲染阶段：beforeMount、mounted

3. Vue生命周期钩子函数的作用是什么？

• beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用，可以在这个阶段进行一些初始化的工作，但是此时数据和DOM都还未初始化。
• created：在实例创建完成后被调用，此时已经完成了数据观测和事件配置，可以在这个阶段进行一些异步操作。
• beforeMount：在挂载开始之前被调用，此时模板已经编译完成，但是还未生成真正的DOM节点。
• mounted：在挂载完成之后被调用，此时组件已经生成了对应的DOM结构，可以进行DOM操作。
• beforeUpdate：在数据更新之前被调用，可以在这个阶段进行一些数据的准备工作。
• updated：在数据更新之后被调用，此时组件已经重新渲染，可以进行一些DOM操作。
• beforeDestroy：在实例销毁之前被调用，可以在这个阶段进行一些清理工作，比如清除定时器、解绑事件等。
• destroyed：在实例销毁之后被调用，此时组件已经被完全销毁，可以进行一些后续的操作。

以上是Vue的常用生命周期钩子函数，通过在不同的阶段执行相应的代码，我们可以实现更精细的控制和管理组件的行为。