Vue.js --- 生命周期-EW帮帮网

微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

1. 前言

在 Vue.js 中，生命周期是指一个 Vue 实例从创建到销毁的过程。Vue 提供了一系列的生命周期钩子（lifecycle hooks），让开发者可以在不同的阶段执行特定的代码。了解这些生命周期钩子是构建 Vue 组件的基础，能够帮助你在合适的时机执行代码，处理数据和事件。

2. 生命周期

2.1 创建阶段

该阶段包括实例的初始化和设置，在此阶段无法在DOM文件中查看到我们的Vue组件的信息

- beforeCreate

实例被创建之后，数据观测和事件配置之前被调用的钩子，在此阶段无法访问data与methods

beforeCreated(){
    console.log('beforeCreate:实例被创建之前')
}

- created

在实例创建完成后被调用，在此阶段，实例已经完成数据观测以及事件配置，可以访问data与methods

created(){
    console.log('created:实例已创建，可以访问data&methods')
}

2.2 挂载阶段

这个阶段包括将组件挂载到DOM中

- beforeMount

在挂载之前被调用，在该阶段，模板并没有被渲染到DOM

beforemount(){
    console.log('beforemount:模板尚未被挂载到 DOM')
}

- mounted

在挂载后被调用，此时组件已被渲染到 DOM 中。可以在这里进行 DOM 操作或发送 AJAX 请求

mounted() {
    console.log('mounted: 组件已挂载到 DOM 中。');
  }

2.3 更新阶段

这个阶段包括当数据变化时，组件的重新渲染

- beforeUpdate

在数据变化后，DOM 重新渲染之前被调用。在这个阶段可以进行一些操作，但不要直接修改数据。

beforeUpdate() {
    console.log('beforeUpdate: 数据变化前调用。');
  }

- updated

在组件重新渲染后被调用。此时可以访问更新后的 DOM

updated(){
    console.log('updated:数据变化后调用')
}

2.4 销毁阶段

该阶段包含组件的销毁过程

- beforeDestroy

在实例销毁之前被调用。在这个阶段，实例仍然可以访问到数据和方法，可以进行清理操作（例如，清除定时器、解除事件监听等）

beforeUpdated(){
    console.log('beforeDestroy:实例销毁前被调用，清理相关资源')
}

- destroyed

在实例销毁后被调用，在此阶段，所有的事件监听与子实例都会被解除

destroyed(){
    console.log('destroyed:实例已被销毁')
}

3. 实例

使用生命周期钩子函数进行数据加载，DOM操作和清理工作

<template>
  <div>
    <h1>用户列表</h1>
    <ul v-if="users.length">
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
    <p v-else>加载中...</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],  // 存储用户数据
      loading: true,  // 控制加载状态
      timer: null  // 存储定时器 ID
    };
  },
  created() {
    console.log('组件创建完成，数据尚未挂载到页面');
    this.fetchUsers();  // 模拟从 API 获取数据
  },
  mounted() {
    console.log('组件挂载到页面，数据已经加载完毕');
    // 模拟定时器操作
    this.timer = setInterval(() => {
      console.log('定时器正在运行...');
    }, 1000);
  },
  beforeUpdate() {
    console.log('组件数据即将更新');
  },
  updated() {
    console.log('组件数据更新完成');
  },
  beforeDestroy() {
    console.log('组件销毁前，清理工作开始');
    if (this.timer) {
      clearInterval(this.timer);  // 清除定时器
    }
  },
  destroyed() {
    console.log('组件销毁后，所有清理工作完成');
  },
  methods: {
    fetchUsers() {
      // 模拟从 API 获取数据
      setTimeout(() => {
        this.users = [
          { id: 1, name: 'Alice' },
          { id: 2, name: 'Bob' },
          { id: 3, name: 'Charlie' }
        ];
        this.loading = false;
      }, 2000);  // 假装这个请求需要2秒钟
    }
  }
};
</script>

Vue.js --- 生命周期