什么是生命周期？

Vue 2.x

每个组件（每个），都有自己独立的生命周期，都会经历上图的所有过程

Vue 3.x

每个组件（每个），都有自己独立的生命周期，都会经历上图的所有过程

生命周期函数

就是Vue实例被创建后，从开始到结束，期间会依次执行一些函数，这些函数就是生命周期函数，也叫钩子函数。

各版本生命周期函数对比

使用 （Vue 3.x）

<template>
  <div>
    <h2 ref="title">{{message}}</h2>
    <button @click="changeMessage">修改message</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        message: "Hello Home"
      }
    },
    methods: {
      changeMessage() {
        this.message = "你好啊，李银河"
      }
    },
    beforeCreate() {
      console.log("home beforeCreate");
    },
    created() {
      console.log("home created");
    },
    beforeMount() {
      console.log("home beforeMount");
    },
    mounted() {
      console.log("home mounted");
    },
    beforeUnmount() {
      console.log("home beforeUnmount");
    },
    unmounted() {
      console.log("home unmounted");
    },
    beforeUpdate() {
      console.log(this.$refs.title.innerHTML);
      console.log("home beforeUpdate");
    },
    updated() {
      console.log(this.$refs.title.innerHTML);
      console.log("home updated");
    }
  }
</script>
<style scoped>
</style>

使用 （Vue 3.x 组合API）

可以同时多个重复的生命周期，都会执行，方便抽取到外面

<template>
  <div>
    <h2 ref="title">{{message}}</h2>
    <button @click="changeMessage">修改message</button>
  </div>
</template>
<script>
import {
  onMounted,
  onBeforeMount,
  onBeforeUnmount,
  onUnmounted,
  onBeforeUpdate,
  ref,
  onUpdated
} from "vue";
export default {
  setup() {
    console.log("home beforeCreate");
    console.log("home created");
    let message = ref("Hello Home");
    const changeMessage = () => {
      message.value = "你好啊，李银河"";
    };
    onBeforeMount(() => {
      console.log("home beforeMount");
    });
    onMounted(() => {
      console.log("home mounted");
    });
    onMounted(() => {
      console.log("home mounted111"); // 可以同时多个重复的生命周期，都会执行，方便抽取到外面
    });
    onBeforeUnmount(() => {
      console.log("home beforeUnmount");
    });
    onUnmounted(() => {
      console.log("home unmounted");
    });
    onBeforeUpdate(() => {
      console.log("message", message.value);
      console.log("home beforeUpdate");
    });
    onUpdated(() => {
      console.log("message", message.value);
      console.log("home updated");
    });
    return {
      message,
      changeMessage
    };
  }
};
</script>
<style scoped>
</style>

keep-alive 的生命周期

keep-alive 可以查看 https://www.yuque.com/yejielin/mypn47/fq2mh6#AVvUm

也就是，被keep-alive标签包裹的组件，我们需要缓存的，额外多了2个生命周期，分别是 活跃（激活中）和 不活跃（隐藏的）