深入理解Vue生命周期钩子及其应用

2024-01-07 18:52:54

Vue.js其独有的生命周期系统允许我们在组件的不同阶段执行自定义代码。在本文中,我们将深入探讨一个简单的Vue组件,通过观察其生命周期钩子的执行顺序,以及如何在特定时刻插入自己的逻辑。

Vue组件代码
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '你好,Vue!'
    };
  },
  // 在组件被创建之前调用
  beforeCreate() {
    console.log('beforeCreate: 组件即将被创建。');
  },
  // 在组件被创建后调用
  created() {
    console.log('created: 组件已经被创建。');
  },
  // 在挂载开始之前调用
  beforeMount() {
    console.log('beforeMount: 组件即将被挂载。');
  },
  // 在挂载完成后调用
  mounted() {
    console.log('mounted: 组件已经被挂载。');
  },
  // 在数据更新时调用
  beforeUpdate() {
    console.log('beforeUpdate: 组件即将被更新。');
  },
  // 在数据更新后调用
  updated() {
    console.log('updated: 组件已经被更新。');
  },
  // 在组件销毁之前调用
  beforeDestroy() {
    console.log('beforeDestroy: 组件即将被销毁。');
  },
  // 在组件销毁后调用
  destroyed() {
    console.log('destroyed: 组件已经被销毁。');
  },
  methods: {
    updateMessage() {
      // 通过点击按钮更新消息,触发生命周期钩子
      this.message += '!';
    }
  }
};
</script>

<style scoped>
</style>

Vue生命周期钩子解析


1.beforeCreate 和 created: 在组件实例被创建前和创建后分别调用。此时,组件实例已经初始化,但尚未开始挂载。
2.beforeMount 和 mounted: beforeMount 在挂载开始之前调用,而 mounted 在挂载完成后调用。这两个钩子是处理DOM操作的良好时机。
3.beforeUpdate 和 updated: beforeUpdate 在数据更新前调用,而 updated 在数据更新后调用。这两个钩子允许在组件更新时执行一些逻辑。
4.beforeDestroy 和 destroyed: beforeDestroy 在组件销毁前调用,而 destroyed 在销毁后调用。在这两个阶段,可以清理事件监听器、定时器等资源,确保不会发生内存泄漏。
按钮点击更新消息
在组件中,我们通过点击按钮触发 updateMessage 方法,该方法将在按钮点击时更新 message 数据。这一更新操作不仅改变了页面上的显示文本,还触发了生命周期钩子函数 beforeUpdate 和 updated。
?

文章来源:https://blog.csdn.net/2301_79265530/article/details/135431398
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。