首页> 基础笔记 >Vue学习笔记 >组件组件

vue组件的生命周期--钩子函数

作者：小萝卜 2024-03-19 【 Vue 】浏览 335

简介Vue组件的生命周期可以被分为四个主要的阶段：创建（Creation）、挂载（Mounting）、更新（Updating）和销毁（Destruction）。每个阶段都有一些特定的钩子函数，可以注入自定义的逻辑。

vue组件的生命周期

Vue组件的生命周期可以被分为四个主要的阶段：创建（Creation）、挂载（Mounting）、更新（Updating）和销毁（Destruction）。每个阶段都有一些特定的钩子函数，可以注入自定义的逻辑。

创建阶段：

beforeCreate：实例初始化之后，数据观测(data observer)和事件/watcher 设置之前调用。

created：实例创建完成后被调用，在这一步中，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。

挂载阶段：

beforeMount：模板编译/挂载之前调用，此时$el属性已经创建，但是还没挂载到DOM上。

mounted：实例挂载到DOM上后调用，此时可以进行DOM相关的操作。

更新阶段：

beforeUpdate：数据更新时调用，此时DOM还未更新。

updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，调用该钩子。

销毁阶段：

beforeDestroy：实例销毁之前调用。此时实例仍然完全可用。

destroyed：Vue实例销毁后调用，此时所有的事件监听器会被移除，所有的子实例也会被销毁。

生命周期函数补充

keep-alive

添加 keep-alive 标签后会增加 activated 和 deactivated 这两个生命周期函数，初始化操作放在 activated里面，一旦切换组件，因为组件是缓存的而没有被销毁，所以它不会执行销毁阶段的钩子函数，所以移除操作需要放在 deactivated 里面，在里面进行一些善后操作，这个时候 created 钩子函数只会组件首次加载时执行一次，销毁的钩子函数一直没有执行。

activated(组件激活时)：被 keep-alive 缓存的组件激活时调用，可以初始化一些数据。

deactivated(组件停用时)：被 keep-alive 缓存的组件停用时调用。在deactived里面，在里面进行一些善后操作。

阶段图示：

生命周期图示：

代码实例：

<template>
  <div>{{ message }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate: 实例被创建出来之后');
  },
  created() {
    console.log('created: 数据观测和事件/watcher 设置之后');
  },
  beforeMount() {
    console.log('beforeMount: 模板编译/挂载之前');
  },
  mounted() {
    console.log('mounted: 模板编译/挂载之后');
  },
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新时');
  },
  updated() {
    console.log('updated: 由于数据更改导致的虚拟DOM重新渲染和打补丁');
  },
  beforeDestroy() {
    console.log('beforeDestroy: 实例销毁之前');
  },
  destroyed() {
    console.log('destroyed: 实例销毁后');
  }
};
</script>