组件的生命周期钩子函数有哪些？

beforeCreate（选项式组件）
- 执行时机：在组件实例被创建之初，数据观测（data）和事件配置（events）之前被调用。
- 用途示例：
  - 主要用于一些初始化操作，比如加载一些外部的配置文件或者初始化一些不会被响应式系统追踪的变量。不过在这个阶段，由于data还没被设置为响应式，所以不能访问组件中的data和computed等属性。
  - 例如，在一个需要从服务器获取配置信息的组件中，可以在beforeCreate阶段发起获取配置文件的请求，代码如下：

收起

javascript

复制

const MyComponent = {
  beforeCreate() {
    // 发起获取配置文件的请求
    fetch('config.json')
     .then(response => response.json())
     .then(config => {
        // 可以在这里将配置信息存储到组件实例的某个属性中
        // 不过此时不能直接使用this.data来存储，因为data还未被处理为响应式
        this.config = config;
      });
  },
  data() {
    return {
      // 组件的数据
    };
  },
  //...其他选项
};

created（选项式组件）
- 执行时机：组件实例创建完成后立即调用，此时data已经完成响应式处理，可以访问组件中的data和computed等属性，但是还没有开始挂载到 DOM。
- 用途示例：
  - 这个阶段适合进行一些数据的初始化操作，比如根据组件的初始数据计算出一些衍生数据。
  - 例如，有一个组件用于展示用户信息列表，在created阶段可以对用户数据进行初步的排序：

收起

javascript

复制

const UserListComponent = {
  data() {
    return {
      users: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
      ]
    };
  },
  created() {
    // 对用户数据按照年龄进行排序
    this.users.sort((a, b) => a.age - b.age);
  },
  //...其他选项
};

beforeMount（选项式组件）
- 执行时机：在组件挂载到 DOM 之前被调用，此时模板已经编译完成，但是还没有将实际的 DOM 元素插入到页面中。
- 用途示例：
  - 可以在这个阶段对即将挂载的 DOM 进行最后的调整，比如修改一些样式属性或者添加一些自定义的属性。
  - 例如，要在组件挂载前给组件的根元素添加一个自定义的数据属性，可以这样做：

收起

javascript

复制

const MyComponent = {
  template: '<div>组件内容</div>',
  beforeMount() {
    const root = this.$el;
    root.dataset.customAttr = 'customValue';
  },
  //...其他选项
};

mounted（选项式组件）
- 执行时机：组件挂载到 DOM 之后被调用，此时可以访问组件的 DOM 元素（通过this.$el），并且可以和外部的 DOM 进行交互，如获取页面其他元素的尺寸等。
- 用途示例：
  - 常用于初始化一些需要 DOM 存在才能进行的操作，比如第三方插件的初始化。如果要使用一个图片轮播插件，并且这个插件需要在 DOM 元素存在的情况下才能初始化，可以在mounted阶段进行：

收起

javascript

复制

const CarouselComponent = {
  template: '<div class="carousel"><img src="image1.jpg" /><img src="image2.jpg" /></div>',
  mounted() {
    // 假设这里有一个名为initCarousel的函数用于初始化轮播插件
    initCarousel(this.$el);
  },
  //...其他选项
};

beforeUpdate（选项式组件）
- 执行时机：数据更新时，DOM 更新之前被调用。当组件的数据发生变化，并且即将重新渲染 DOM 时，会触发这个钩子。
- 用途示例：
  - 可以在这个阶段进行一些数据的备份或者记录即将发生的变化。例如，在一个表单组件中，当用户修改表单数据，即将更新 DOM 展示新数据时，可以记录旧的数据：

收起

javascript

复制

const FormComponent = {
  data() {
    return {
      formData: {
        name: '',
        email: ''
      }
    };
  },
  beforeUpdate() {
    this.oldFormData = {...this.formData };
  },
  //...其他选项
};

updated（选项式组件）
- 执行时机：数据更新导致 DOM 更新之后被调用。此时 DOM 已经根据新的数据重新渲染完成。
- 用途示例：
  - 可以用于在 DOM 更新后执行一些操作，比如检查更新后的 DOM 是否符合预期，或者对更新后的 DOM 元素进行进一步的操作。例如，在一个动态生成表格的组件中，更新数据后，可以检查表格的行数是否正确：

收起

javascript

复制

const TableComponent = {
  data() {
    return {
      tableData: []
    };
  },
  updated() {
    const tableRows = this.$el.querySelectorAll('tr');
    console.log('表格行数:', tableRows.length);
  },
  //...其他选项
};

beforeUnmount（选项式组件）
- 执行时机：在组件卸载之前被调用。当组件即将从 DOM 中移除时，会触发这个钩子。
- 用途示例：
  - 用于清理组件占用的资源，如清除定时器、取消订阅事件等。例如，在一个包含定时器的组件中，在卸载前需要清除定时器：

收起

javascript

复制

const TimerComponent = {
  data() {
    return {
      timerId: null
    };
  },
  mounted() {
    this.timerId = setInterval(() => {
      // 执行一些定时操作
    }, 1000);
  },
  beforeUnmount() {
    clearInterval(this.timerId);
  },
  //...其他选项
};

unmounted（选项式组件）
- 执行时机：组件卸载之后被调用，此时组件已经从 DOM 中移除，所有的事件监听器等也都已经被清除。
- 用途示例：
  - 可以用于一些最后的清理工作或者记录组件已经被卸载的信息。例如，在一个组件被卸载后，可以记录到日志中：

收起

javascript

复制

const LoggingComponent = {
  unmounted() {
    console.log('组件已卸载');
  },
  //...其他选项
};

setup函数相关的生命周期钩子（组合式组件）
- onBeforeMount：与beforeMount相对应，在组件挂载到 DOM 之前调用。在setup函数中可以这样使用：

收起

javascript

复制

import { onBeforeMount } from 'vue';
export default {
  setup() {
    onBeforeMount(() => {
      // 挂载前的操作
    });
    return {};
  }
};

onMounted：与mounted相对应，在组件挂载到 DOM 之后调用。例如：

收起

javascript

复制

import { onMounted } from 'vue';
export default {
  setup() {
    onMounted(() => {
      // 挂载后的操作，如初始化插件等
    });
    return {};
  }
};

onBeforeUpdate：与beforeUpdate相对应，在数据更新 DOM 更新之前调用。
onUpdated：与updated相对应，在数据更新 DOM 更新之后调用。
onBeforeUnmount：与beforeUnmount相对应，在组件卸载之前调用。
onUnmounted：与unmounted相对应，在组件卸载之后调用。

这些生命周期钩子函数在组件的不同阶段提供了执行特定操作的机会，帮助开发者更好地管理组件的行为和资源。

组件的生命周期钩子函数有哪些？

猜你喜欢