Vue生命周期

一、生命周期

在Vue.js中，组件实例有一个完整的生命周期，包括创建、挂载、更新和销毁等阶段。Vue生命周期钩子函数允许我们在组件不同阶段添加自定义逻辑。以下是Vue生命周期的详细介绍：

1.1 创建阶段（Creation）

1. beforeCreate

   • 在实例初始化之后，数据观测 (data observer) 和事件配置 (event/watcher setup) 之前被调用。
   • 此时实例还未初始化完成，数据和方法均不可用。

   • created

     • 在实例创建完成后被调用。
     • 可以访问实例的数据和方法，但DOM还未生成，无法访问模板中的元素。

1.2 挂载阶段（Mounting）

1. beforeMount

   • 在挂载开始之前被调用：相关的 render 函数首次被调用。

   • mounted

     • 在实例挂载完成后被调用。
     • 可以访问到DOM元素，数据和方法均已初始化完成。

1.3 更新阶段（Updating）

1. beforeUpdate

   
   （图片来源网络，侵删）
   • 数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。

   • updated

     • 数据更新后调用，发生在虚拟DOM重新渲染和打补丁之后。
     • 可以访问到更新后的DOM元素。

1.4 销毁阶段（Destroying）

1. beforeDestroy

   • 实例销毁之前调用。
   • 可以进行一些清理工作，如清除定时器、解绑事件监听等。

   • destroyed

     • 实例销毁后调用。
     • 所有的事件监听器和子实例均已被销毁。

1.5 错误处理（Error Handling）

1. errorCaptured
   • 当子组件抛出错误时，会在当前组件的任意祖先组件中触发此钩子函数。
   • 可以用来捕获子组件错误并做相应处理。

在开发过程中，可以根据不同的需求在这些生命周期钩子函数中添加自定义逻辑，实现更灵活的控制和交互。Vue生命周期的理解对于开发Vue.js应用程序非常重要，可以帮助我们更好地管理组件和数据的生命周期。

二、相关函数

在Vue.js中，生命周期函数是一系列钩子函数，用于在组件不同阶段执行特定逻辑。以下是Vue生命周期函数的介绍以及相应的示例说明：

2.1. beforeCreate

• 在实例初始化之后，数据观测和事件配置之前被调用。
• 适合用来初始化一些数据或执行一些异步操作。

  beforeCreate() {
      console.log('beforeCreate hook triggered');
      this.message = 'Hello, Vue!';
  }
  

  2.2. created

  • 在实例创建完成后被调用。
  • 可以访问实例的数据和方法，但DOM还未生成。

    created() {
        console.log('created hook triggered');
        console.log('Message:', this.message);
    }
    

    2.3. mounted

    • 在实例挂载完成后被调用。
    • 可以访问到DOM元素，数据和方法均已初始化完成。

      mounted() {
          console.log('mounted hook triggered');
          let element = document.getElementById('app');
          console.log('DOM Element:', element);
      }
      

      2.4. beforeUpdate

      • 数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。

        beforeUpdate() {
            console.log('beforeUpdate hook triggered');
            console.log('Message before update:', this.message);
        }
        

        2.5. updated

        • 数据更新后调用，发生在虚拟DOM重新渲染和打补丁之后。

          updated() {
              console.log('updated hook triggered');
              console.log('Message after update:', this.message);
          }
          

          2.6. beforeDestroy

          • 实例销毁之前调用，可以进行一些清理工作。

            beforeDestroy() {
                console.log('beforeDestroy hook triggered');
                // 清除定时器
                clearInterval(this.timer);
            }
            

            2.7. destroyed

            • 实例销毁后调用，所有的事件监听器和子实例均已被销毁。

              destroyed() {
                  console.log('destroyed hook triggered');
                  console.log('Component destroyed');
              }
              

              通过在不同生命周期函数中添加逻辑，可以实现对组件生命周期的精细控制和定制化操作。这些生命周期函数可以帮助我们更好地理解组件的生命周期流程，并在需要时执行相应的操作。

手机扫描二维码访问