Vue.js 生命周期及其简单实现

前端

2023-10-14 17:55:16

Vue.js 生命周期详解

Vue.js 生命周期概述

Vue.js 生命周期涵盖了 Vue 实例从诞生到消亡的整个旅程。它是由一系列钩子函数组成的，允许开发者在特定阶段介入，执行自定义操作。

生命周期的主要阶段：

创建前 (beforeCreate)： 实例化之前调用，此时数据和方法尚未初始化。
创建 (created)： 实例化后调用，数据和方法已初始化，但 DOM 元素尚未挂载。
挂载前 (beforeMount)： DOM 元素挂载之前调用，DOM 元素已创建但尚未插入文档。
挂载 (mounted)： DOM 元素挂载后调用，组件已可与用户交互。
更新前 (beforeUpdate)： 数据更新之前调用，新数据已获取，但 DOM 元素尚未更新。
更新 (updated)： DOM 元素更新后调用，组件已可再次与用户交互。
卸载前 (beforeDestroy)： 实例销毁之前调用，组件已从 DOM 元素中移除。
卸载 (destroyed)： 实例销毁后调用，所有相关资源已释放。

Vue.js 生命周期示例

以下是一个简易的 Vue.js 生命周期实现示例：

const app = new Vue({
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  created() {
    console.log('created: ', this.count); // 0
  },
  mounted() {
    console.log('mounted: ', this.count); // 0
  },
  updated() {
    console.log('updated: ', this.count); // 1
  },
  beforeDestroy() {
    console.log('beforeDestroy: ', this.count); // 1
  },
  destroyed() {
    console.log('destroyed: ', this.count); // 1
  },
});

app.$mount('#app');

setTimeout(() => {
  app.increment();
}, 1000);

setTimeout(() => {
  app.$destroy();
}, 2000);

在这个示例中，当 Vue 实例创建时，会依次触发 created 和 mounted 钩子函数，输出 count 为 0。点击按钮后，increment 方法被调用，count 增加到 1，触发 updated 钩子函数。最后，当实例销毁时，会依次触发 beforeDestroy 和 destroyed 钩子函数，输出 count 为 1。