vue组件生命周期是什么

是一个组件从 创建 到 销毁 的整个过程就是生命周期。

生命周期函数(钩子函数)

作用：在特定的时间，执行特点的操作。

钩子函数是vue框架内置函数，随着组件的生命周期，自动按次序执行。

四个阶段：
初始化：beforeCreate(创建前) ， created(创建后)
挂载： beforeMount(挂载前) ， mounted(挂载后) 更新： beforeUpdate(更新前) ， updated(更新后) 销毁： beforeDestroy(销毁前) ， destroyed(销毁后)

父组件

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h1>生命周期-父组件</h1>
    <ul>
      <li v-for="(item, ind) in arr" :key="ind">{{ item }}</li>
    </ul>
    <button @click="arr.push(Math.random() * 10)">增加一个元素</button>
    <MyCom v-if="show" />
  </div>
</template>

<script>
// 导入->注册->使用
import MyCom from "./MyCom.vue";
export default {
  data() {
    return {
      arr: [0, 1, 2, 3],
      show: true,
      // msg 可以在其他的函数中通过this.msg去访问
      msg: "我是父组件的变量",
    };
  },
  components: { MyCom },

  beforeCreate() {
    // 1. 创建前
    console.log("beforeCreate --- 父组件实例初始化前");
    // console.log(this.msg); // undefined
  },
  created() {
    // 给对象添加属性
    // this.fn = () => {
    //   console.log(Date.now());
    // };
    // document.addEventListener("mousemove", this.fn);
    // 2. 创建后=> 发送ajax请求
    console.log("created ---  父组件实例初始化后");
    console.log(this.msg); // "我是变量"
  },
  beforeMount() {
    // 3. 挂载前
    console.log("beforeMount --- vue的虚拟DOM, 父组件挂载到真实的网页之前");
    console.log(document.getElementById("myUl")); // null
    // console.log(document.getElementById("myUl").children[1].innerHTML) // 报错
  },
  mounted() {
    // 4. 挂载后=> 操作dom
    console.log("mounted --- vue的虚拟DOM, 父组件挂载到真实的网页上 ");
    console.log(document.getElementById("myUl").children[1].innerHTML); // 2
    console.log(document.querySelector("#myUl").children[3].innerText); // 4
  },
  beforeUpdate() {
    // 5. 更新前
    console.log("beforeUpdate --- 父组件数据更新, 页面更新前");
    // 比如点击新增数组元素, vue会触发此生命周期函数, 但是此时页面并未更新, 所以获取不到新增的li标签
    // console.log(document.getElementById("myUl").children[4].innerHTML); // 报错
  },
  updated() {
    // 6. 更新后
    // console.log("updated --- 父组件数据更新, 页面更新后");
    console.log(document.getElementById("myUl").children[4].innerHTML);
  },
  beforeDestroy() {
    // 7. 销毁前
    // (清除定时器 / 解绑js定义的事件)
    console.log("beforeDestroy --- 父组件实例销毁之前调用");
  },
  destroyed() {
    // document.removeEventListener('mousemove', 回调函数的名字)
    // document.removeEventListener("mousemove", this.fn);
    // 8. 销毁后
    // (清除定时器 / 解绑js定义的事件)
    console.log("destroyed --- 父组件销毁完成");
  },
};
</script>

<style>
</style>

子组件

<template>
  <div>
    <ul id="myUl">
      <li v-for="(item, ind) in arr" :key="ind">{{ item }}</li>
    </ul>
    <button @click="arr.push(Math.random() * 10)">增加一个元素</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      // msg 可以在其他的函数中通过this.msg去访问
      msg: "我是子组件的变量",
      arr: [1, 2, 3, 4],
    };
  },
  beforeCreate() {
    // 1. 创建前
    console.log("beforeCreate --- 子组件实例初始化前");
    console.log(this.msg); // undefined
  },
  created() {
    // 给对象添加属性

    // this.fn = () => {
    //   console.log(Date.now());
    // };
    // document.addEventListener("mousemove", this.fn);
    // 2. 创建后=> 发送ajax请求
    console.log("created ---  子组件实例初始化后");
    console.log(this.msg); // "我是变量"
  },
  beforeMount() {
    // 3. 挂载前
    console.log("beforeMount --- vue的虚拟DOM, 子组件挂载到真实的网页之前");
    console.log(document.getElementById("myUl")); // null
    // console.log(document.getElementById("myUl").children[1].innerHTML); // 报错
  },
  +() {
    // 4. 挂载后=> 操作dom
    console.log("mounted --- vue的虚拟DOM, 子组件挂载到真实的网页上 ");
    console.log(document.getElementById("myUl").children[1].innerHTML);
    console.log(document.querySelector("#myUl").children[1].innerText);
  },
  beforeUpdate() {
    // 5. 更新前
    console.log("beforeUpdate --- 子组件数据更新, 页面更新前");
    // 比如点击新增数组元素, vue会触发此生命周期函数, 但是此时页面并未更新, 所以获取不到新增的li标签
    // console.log(document.getElementById("myUl").children[4].innerHTML); // 报错
  },
  updated() {
    // 6. 更新后
    console.log("updated --- 子组件数据更新, 页面更新后");
    console.log(document.getElementById("myUl").children[4].innerHTML);
  },
  beforeDestroy() {
    // 7. 销毁前
    // (清除定时器 / 解绑js定义的事件)
    console.log("beforeDestroy --- 子组件实例销毁之前调用");
  },
  destroyed() {
    // document.removeEventListener('mousemove', 回调函数的名字)
    // document.removeEventListener("mousemove", this.fn);
    // 8. 销毁后
    // (清除定时器 / 解绑js定义的事件)
    console.log("destroyed --- 子组件销毁完成");
  },
};
</script>

<style>
</style>

父组件和子组件的执行顺序是

先执行父组件的初始化还有beforeMount(挂载前)，再执行子组件的初始化和挂载，最后才执行父组件的mounted(挂载后)

如图所示