Vue2生命周期

概念

“每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。”

常见的Vue2生命周期包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed。这些生命周期钩子允许开发者在组件创建、挂载、更新和销毁等不同阶段执行自定义逻辑。

beforeCreate

beforeCreate生命周期钩子函数在组件实例被创建之前调用。在这个阶段，实例已经被初始化，但数据观测和事件配置尚未开始。这是执行一些全局初始化任务的好时机：

<template>
  <div>
    <p>{{ message }}</p >
  </div>
</template>

<script>
export default {
  beforeCreate() {
    // 在组件创建前执行的逻辑

    // 示例1: 设置全局变量
    // 通过在Vue的原型上设置属性，可以创建全局变量，该变量可以在整个应用中访问。
    Vue.prototype.$myGlobalVariable = 'I am a global variable';

    // 示例2: 发送全局事件
    // 使用Vue的事件系统，开发者可以在`beforeCreate`中发送全局事件，其他组件可以监听这些事件。
    EventBus.$emit('componentBeforeCreate');

    // 控制台输出调试
    console.log('Component is about to be created.');
  },
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

<style scoped>
/* 样式 */
</style>

created

created 生命周期钩子函数在组件实例被创建之后调用，此时实例已经完成数据观测和初始化，但尚未挂载到页面上：

<template>
  <div>
    <p>{{ message }}</p >
    <p>{{ asyncData }}</p >
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
      asyncData: null
    };
  },
  created() {
    // 在组件创建后执行的逻辑

    // 示例1: 从服务器获取数据
    // 通过调用方法 `fetchDataFromServer` 模拟从服务器异步获取数据，并在数据就绪后更新组件的状态。
    this.fetchDataFromServer();

    // 示例2: 执行一些初始化操作
    // 调用 `initializeComponent` 方法执行一些初始化操作，例如设置初始状态或执行其他配置。
    this.initializeComponent();

    // 控制台输出调试
    console.log('Component has been created.');
  },
  methods: {
    fetchDataFromServer() {
      // 模拟从服务器获取数据的异步操作
      setTimeout(() => {
        this.asyncData = 'Data from server';
      }, 1000);
    },
    initializeComponent() {
      // 执行一些初始化操作
      console.log('Initializing the component...');
    }
  }
};
</script>

<style scoped>
/* 样式 */
</style>

beforeMount

beforeMount 生命周期钩子函数在组件挂载到页面之前调用，此时虚拟 DOM 已经创建完成，但尚未渲染到页面上：

<template>
  <div>
    <p>{{ message }}</p >
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeMount() {
    // 在组件挂载前执行的逻辑

    // 示例1: 在挂载前对数据进行处理
    // 调用 `prepareDataForMount` 方法，用于在组件挂载前对数据进行处理。
    this.prepareDataForMount();

    // 控制台输出调试
    console.log('Component is about to be mounted.');
  },
  methods: {
    prepareDataForMount() {
      // 在挂载前对数据进行处理
      console.log('Preparing data for mounting...');
    },
    // 通过点击按钮调用 `changeMessage` 方法，改变 `message` 数据，这会触发重新渲染。
    changeMessage() {
      // 改变数据，触发重新渲染
      this.message = 'Message changed!';
    }
  }
};
</script>

<style scoped>
/* 样式 */
</style>

mounted

mounted 生命周期钩子函数在组件挂载到页面之后调用，此时组件已经被渲染到页面上：

<template>
  <div>
    <p>{{ message }}</p >
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  mounted() {
    // 在组件挂载后执行的逻辑

    // 示例1: 初始化第三方库
    // 调用 `initializeThirdPartyLibrary` 方法，用于在组件挂载后初始化第三方库。
    this.initializeThirdPartyLibrary();

    // 示例2: 设置定时器
    // 在 `mounted` 钩子中设置定时器，用于定时更新数据。需要注意，在组件销毁前需要清理定时器，这部分逻辑在 `beforeDestroy` 钩子中实现。
    this.timer = setInterval(() => {
      this.updateData();
    }, 1000);

    // 控制台输出调试
    console.log('Component has been mounted.');
  },
  methods: {
    initializeThirdPartyLibrary() {
      // 初始化第三方库的逻辑
      console.log('Initializing third-party library...');
    },
    updateData() {
      // 定时更新数据
      this.message = 'Updated message at ' + new Date().toLocaleTimeString();
    },
    // 通过点击按钮调用 `changeMessage` 方法，改变 `message` 数据，这会触发重新渲染。
    changeMessage() {
      // 改变数据，触发重新渲染
      this.message = 'Message changed!';
    }
  },
  beforeDestroy() {
    // 在组件销毁前清理定时器
    clearInterval(this.timer);
  }
};
</script>

<style scoped>
/* 样式 */
</style>

beforeUpdate

beforeUpdate 生命周期钩子函数在数据更新之前调用，允许开发者在数据变化之前执行一些准备工作：

<template>
  <div>
    <p>{{ message }}</p >
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeUpdate() {
    // 在数据更新前执行的逻辑

    // 示例1: 在更新前对数据进行处理
    // 调用 `prepareDataForUpdate` 方法，用于在数据即将更新之前对数据进行处理。
    this.prepareDataForUpdate();

    // 控制台输出调试
    console.log('Component is about to be updated.');
  },
  methods: {
    prepareDataForUpdate() {
      // 在更新前对数据进行处理
      console.log('Preparing data for update...');
    },
    // 通过点击按钮调用 `changeMessage` 方法，改变 `message` 数据，这会触发重新渲染，并在 `beforeUpdate` 钩子中执行相应的逻辑。
    changeMessage() {
      // 改变数据，触发重新渲染
      this.message = 'Message changed!';
    }
  }
};
</script>

<style scoped>
/* 样式 */
</style>

updated

updated 生命周期钩子函数在数据更新之后调用，允许开发者在更新后执行一些与DOM相关的任务：

<template>
  <div>
    <p>{{ message }}</p >
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  updated() {
    // 在数据更新后执行的逻辑

    // 示例1: 执行与更新后的DOM有关的任务
    // 调用 `performPostUpdateTasks` 方法，用于执行一些与更新后的DOM有关的任务。
    this.performPostUpdateTasks();

    // 控制台输出调试
    console.log('Component has been updated.');
  },
  methods: {
    performPostUpdateTasks() {
      // 执行与更新后的DOM有关的任务
      console.log('Performing tasks after update...');
    },
    // 通过点击按钮调用 `changeMessage` 方法，改变 `message` 数据，这会触发重新渲染，并在 `updated` 钩子中执行相应的逻辑。
    changeMessage() {
      // 改变数据，触发重新渲染
      this.message = 'Message changed!';
    }
  }
};
</script>

<style scoped>
/* 样式 */
</style>

beforeDestroy

beforeDestroy 生命周期钩子函数在组件销毁之前调用，允许开发者在组件销毁之前执行一些清理工作：

<template>
  <div>
    <p>{{ message }}</p >
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
      timer: null
    };
  },
  beforeDestroy() {
    // 在组件销毁前执行的逻辑

    // 示例1: 清理定时器
    // 在 `beforeDestroy` 钩子中调用 `cleanupTasks` 方法，用于清理定时器等任务，以防止在组件销毁后出现内存泄漏。
    this.cleanupTasks();

    // 控制台输出调试
    console.log('Component is about to be destroyed.');
  },
  methods: {
    cleanupTasks() {
      // 清理定时器等任务
      clearInterval(this.timer);
    },
    // 通过点击按钮调用 `changeMessage` 方法，改变 `message` 数据，这会触发重新渲染，同时在组件销毁前会执行 `beforeDestroy` 钩子中的清理任务。
    changeMessage() {
      // 改变数据，触发重新渲染
      this.message = 'Message changed!';
    }
  }
};
</script>

<style scoped>
/* 样式 */
</style>

destroyed

destroyed 生命周期钩子函数在组件销毁之后调用，允许开发者在组件已经解绑定所有东西之后执行最终的清理工作：

<template>
  <div>
    <p>{{ message }}</p >
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
      timer: null
    };
  },
  destroyed() {
    // 在组件销毁后执行的逻辑

    // 示例1: 释放资源
    // 在 `destroyed` 钩子中调用 `releaseResources` 方法，用于释放资源等最终清理工作。
    this.releaseResources();

    // 控制台输出调试
    console.log('Component has been destroyed.');
  },
  methods: {
    releaseResources() {
      // 释放资源等最终清理工作
      console.log('Releasing resources...');
    },
    // 通过点击按钮调用 `changeMessage` 方法，改变 `message` 数据，这会触发重新渲染，同时在组件销毁后会执行 `destroyed` 钩子中的最终清理工作。
    changeMessage() {
      // 改变数据，触发重新渲染
      this.message = 'Message changed!';
    }
  }
};
</script>

<style scoped>
/* 样式 */
</style>

参考

• https://v2.vuejs.org/v2/guide/instance.html