vue生命周期详解以及父子组件的生命周期执行顺序

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

Vue的生命周期是指Vue实例从创建到销毁的整个过程，这个过程可以分为四个阶段：初始化阶段、挂载阶段、更新阶段和销毁阶段。每个阶段都伴随着特定的钩子函数，这些钩子函数允许开发者在组件生命周期的特定时间点执行特定的操作
以下是Vue2生命周期的详细解析：

1. 初始化阶段
   beforeCreate：实例被创建之初，在这个阶段data和methods中的数据还没有初始化，因此无法访问到它们。这个阶段主要是进行一些初始化工作，如设置事件和生命周期的回调函数等。
   created：实例创建完成，数据观测（data observer）、属性和方法的运算，以及watch/event事件的设置也已完成。此时可以访问data和methods中的数据和方法，但无法访问到$el属性，因为此时还未挂载到DOM上。这个阶段适合进行网络请求等操作。
2. 挂载阶段
   beforeMount：在挂载开始之前被调用，此时模板编译已经完成但是还未挂载到页面中。这个阶段可以访问到编译后的模板，但还不能访问到真实的DOM元素。
   mounted：实例已经被挂载到页面上，此时真实DOM生成，可以访问到$el属性，也可以操作DOM和通过AJAX获取数据。这个阶段是执行DOM操作的最佳时机。
3. 更新阶段
   Vue2并没有提供专门的钩子函数来明确地标识更新阶段的开始和结束，而是通过beforeUpdate和updated这两个钩子函数来执行更新前后的操作。
   beforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前。适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。
   updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
4. 销毁阶段
   beforeDestroy：实例销毁之前调用。在这一步中，实例仍然可以被访问，这是一个进行清理工作，如取消计时器、解绑全局事件、销毁插件对象等的好时机。
   destroyed：Vue实例已经被完全销毁，此时无法再访问实例中的数据和方法。
   destroyed：Vue实例已经被完全销毁，此时无法再访问实例中的数据和方法。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、父子组件生命周期执行顺序？

一个完整的父子组件生命周期：

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->父beforeUpdate->子beforeUpdate->子updated->父updated->父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

二、案例

1.父组件

代码如下（示例）：

<template>
  <div>
    <h1>父组件 Component</h1>
    <button @click="namechange1" style="margin-right: 20px;">手动更新</button>
    <button @click="xhChange">手动销毁</button>
    <child-component :child-data="parentData" v-if="isShow"></child-component>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  name: "ParentComponent",
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentData: "Initial 父组件 Data",
      isShow:true,
    };
  },
  beforeCreate() {
    console.log("父组件 beforeCreate");
  },
  created() {
    console.log("父组件 created");
  },
  beforeMount() {
    console.log("父组件 beforeMount");
  },
  mounted() {
    console.log("父组件 mounted");
  },
  // 假设我们在这里更改了parentData，以触发子组件的更新
  beforeUpdate(){
    console.log("父组件 beforeUpdated");
  },
  updated() {
    console.log("父组件 updated");
  },
  beforeDestroy() {
    console.log("父组件 beforeDestroy");
  },
  destroyed() {
    console.log("父组件 destroyed");
  },
  methods:{
    // 手动触发更新
    namechange1(){
      this.parentData = 'parentData改变了'
    },
    // 手动触发销毁
    xhChange(){
      this.isShow = false;
    }
  }
};
</script>

2.子组件

代码如下（示例）：

<template>
  <div>
    <h2>子组件 Component</h2>
    <p>子组件 Data: {{ childData }}</p>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  props: ["childData"],
  beforeCreate() {
    console.log("子组件 beforeCreate");
  },
  created() {
    console.log("子组件 created");
  },
  beforeMount() {
    console.log("子组件 beforeMount");
  },
  mounted() {
    console.log("子组件 mounted");
  },
  // 假设父组件的parentData更新，这里会触发updated
  beforeUpdate() {
    console.log("子组件 beforeUpdated");
  },
  updated() {
    console.log("子组件 updated");
  },
  beforeDestroy() {
    console.log("子组件 beforeDestroy");
  },
  destroyed() {
    console.log("子组件 destroyed");
  },
};
</script>

3.代码执行

---

彩蛋

前端常用词汇
Network ['netwɜːk] 网络
General ['dʒen(ə)r(ə)l] 一般的，大体的
Request [rɪ’kwest] 请求
Response [rɪ’spɒns] 响应
Headers ['hedəz] 标题
HyperText ['haɪpətekst] 超文本
Transfer [træns’fɝ] 传递
Protocol ['prəʊtəkɒl] 协议
HyperText Transfer Protocol http:超文本传输协议
document ['dɒkjʊm(ə)nt] 文件
title ['taɪt(ə)l] 标题
type [taɪp] 类型
doctype: 文档类型
meta ['metə] 变化
body ['bɒdɪ] 身体
notepad ['nəʊtpæd] 笔记本；记事手册
heading ['hedɪŋ] 标题
paragraph ['pærəgrɑːf] 段落