前言

什么是生命周期函数

在 Vue.js 中，组件有一系列的生命周期钩子函数，它们允许你在组件不同的阶段执行自定义的逻辑代码。这些生命周期钩子函数可以让你在组件被创建、挂载、更新和销毁等不同阶段执行相应的操作。

在Vue.js中created函数是什么

在 Vue.js 中，created 是组件生命周期中的一个钩子函数，它表示一个 Vue 实例被创建之后调用。在这个阶段，Vue 实例已经完成了数据观测 (data observer) 和事件/生命周期事件监听器的初始化。一般可以在created函数中调用ajax获取页面初始化所需的数据。

以下是 Vue.js 中常见的生命周期钩子函数：

beforeCreate：在实例被创建之初，数据观测 (data observer) 和事件/生命周期事件监听器都未初始化之前调用。
created：在实例被创建后立即调用。在这一阶段，实例已完成以下配置：数据观测 (data observer)、属性和方法的运算、watch/event 事件回调。但是挂载阶段还未开始，$el 属性尚不可用。
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：在挂载完成后调用，即 DOM 元素已经被挂载到页面上之后调用。这时，组件已经完成了挂载，可以访问到 DOM 元素。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中对更新之前的 DOM 做一些操作。
updated：在数据更改导致虚拟 DOM 重新渲染和打补丁之后调用。组件 DOM 已经更新，可以执行依赖于 DOM 的操作。
beforeDestroy：在实例销毁之前调用。在这一阶段，实例仍然完全可用。
destroyed：在实例销毁后调用。这时，组件及其所有的监听器和子组件都已被销毁。

官方的生命周期函数图解

接下来让我们来详细介绍一下created函数。

如何实例一个created生命周期函数

在 Vue.js 中，我们可以利用生命周期钩子函数来执行特定阶段的代码。生命周期函数分别对应着 Vue 实例不同的生命周期阶段，在不同的阶段执行相关的操作或逻辑。以下是如何在 Vue 组件中使用created生命周期函数的方法：

在单文件组件中

xml 复制代码

<template>
  <!-- 组件模板 -->
</template>
<script>
export default {
  data() {
    return {
      // 组件数据
    };
  },
  // created 钩子函数：在实例被创建后调用
  created() {
    // 可以访问到组件的 data 和 methods
    console.log('created 函数');
  },
};
</script>

在全局 Vue 实例中

javascript 复制代码

new Vue({
  el: '#app',
  data() {
    return {
      // 全局 Vue 实例的数据
    };
  },
  // created 钩子函数：在实例被创建后调用
  created() {
    console.log('created hook');
  },
});

当然除了created函数之外，也有一些其它的钩子，在实例生命周期的不同阶段调用如 mounted、 updated 、destroyed 。

结语

created函数的特点

数据初始化完成 ：在 created 钩子函数中，可以访问到 Vue 实例中的数据（data），计算属性 (computed) 和方法 (methods)，它们都已经被初始化了。

适合发起异步请求和订阅 ：由于 created 阶段在实例创建完成后被调用，所以它是一个很好的阶段用于发起异步请求（例如通过 axios 或 fetch 发起网络请求）或者订阅数据更新。

无法访问到 DOM 元素和模板编译后的内容：由于此时尚未完成模板编译和挂载阶段，因此无法访问到实例的 DOM 元素。

总之，created 生命周期钩子是在 Vue 实例被创建后立即被调用的阶段，适合进行一些初始化操作、发起异步请求、订阅数据等操作。但需要注意的是，在 created 阶段还无法访问到 DOM 元素和模板编译后的内容。通常，如果需要在 Vue 实例挂载后进行 DOM 操作，则需要在 mounted 钩子函数中执行。

深入了解vue生命周期函数之created()

前言