c语言编程笔录

首页 >   > 笔记大全

笔记大全

Vue中的组件生命周期以及应用场景介绍

更新时间：2023-12-13

前言

Vue是一种流行的JavaScript框架，广泛用于构建用户界面。Vue中的组件生命周期是管理和控制组件各个阶段的特殊方法。在开发中，了解组件生命周期可以帮助我们在不同的阶段做出相应的操作和处理。本文将介绍Vue中的组件生命周期及其应用场景。

1. 创建阶段（Creation）

组件创建阶段是组件从初始化到创建DOM元素的过程。在这个阶段，Vue组件依次执行以下生命周期钩子函数：

  • beforeCreate：在实例被创建之前调用。在这个阶段，无法访问到数据和DOM。
  • created：实例已经被创建完成。可以访问到数据，但无法访问到DOM。
这个阶段适合用来进行一些初始化的设置，例如创建事件监听器、初始化非响应式的数据等操作。 
export default {
  beforeCreate() {
    // 初始化数据或设置事件监听器
    this.message = 'Hello Vue';
    this.$on('customEvent', this.handleEvent);
  },
  created() {
    // 可以在这个钩子中访问到数据，无法访问到DOM
    console.log(this.message);
  },
  methods: {
    handleEvent() {
      console.log('Custom event triggered');
    }
  }
}

2. 挂载阶段（Mounting）

组件挂载阶段是指组件将自身渲染并挂载到DOM中的过程。在这个阶段，Vue组件依次执行以下生命周期钩子函数：

  • beforeMount：在挂载开始之前被调用。在这个阶段，可以访问到数据和DOM。
  • mounted：实例已经挂载到DOM上。可以访问到数据和DOM。
这个阶段适合执行一些需要访问DOM的操作，例如使用第三方插件、获取元素尺寸、发送网络请求等。 
export default {
  beforeMount() {
    // 可以在这个钩子中访问到数据和DOM
    console.log(this.message);
    this.$nextTick(() => {
      // DOM更新完毕后执行的操作
      const element = document.getElementById('myElement');
      console.log(element.offsetWidth);
    });
  },
  mounted() {
    // 可以在这个钩子中访问到数据和DOM
    console.log(this.message);
  }
}

3. 更新阶段（Updating）

组件更新阶段是指组件在数据发生变化时的更新过程。在这个阶段，Vue组件依次执行以下生命周期钩子函数：

  • beforeUpdate：在更新开始之前被调用。在这个阶段，可以访问到更新前的数据和DOM。
  • updated：实例已经更新完成。可以访问到更新后的数据和DOM。
这个阶段适合执行一些需要根据数据变化做出响应的操作，例如重新计算、重新渲染等。 
export default {
  beforeUpdate() {
    // 可以在这个钩子中访问到更新前的数据和DOM
    console.log(this.message);
  },
  updated() {
    // 可以在这个钩子中访问到更新后的数据和DOM
    console.log(this.message);
  }
}

4. 销毁阶段（Destruction）

组件销毁阶段是指组件从DOM中移除并销毁的过程。在这个阶段，Vue组件依次执行以下生命周期钩子函数：

  • beforeDestroy：在销毁开始之前被调用。在这个阶段，可以访问到数据和DOM。
  • destroyed：实例已经销毁。无法再访问数据和DOM。
这个阶段适合执行一些清理操作，例如取消事件监听器、销毁定时器、释放内存等。 
export default {
  beforeDestroy() {
    // 可以在这个钩子中访问到数据和DOM
    console.log(this.message);
    this.$off('customEvent', this.handleEvent);
  },
  destroyed() {
    // 实例已经销毁，无法再访问数据和DOM
    console.log('Component destroyed');
  }
}

总结

Vue中的组件生命周期包括创建阶段、挂载阶段、更新阶段和销毁阶段。根据不同的阶段，我们可以在生命周期钩子函数中执行相应的操作。了解和合理运用组件生命周期可以帮助我们更好地控制和管理Vue组件，提升开发效率和用户体验。

图文推荐