什么是生命周期：
????????vue中每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。
vue2和vue3中生命周期的对比：????????
对Vue2生命周期不熟悉的同学可以看我的另一篇文章Vue2的生命周期
Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
-
beforeDestroy改名为beforeUnmount -
destroyed改名为unmounted -
Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
-
beforeCreate===>setup() -
created=======>setup() -
beforeMount===>onBeforeMount -
mounted=======>onMounted -
beforeUpdate===>onBeforeUpdate -
updated=======>onUpdated -
beforeUnmount?==>onBeforeUnmount -
unmounted=====>onUnmounted
-
生命周期图解
????????下图展示了实例的生命周期图
Vue2生命周期图
?
?
?Vue3生命周期图
?
?
下面我们通过这个图来分析vue3的生命周期和vue2有什么区别
????????我们可以看到与Vue2不同的是Vue3中上来首先需要调用createApp() 然后传入配置项返回一个实例对象?并且需要.mount() 传出el 需要明确的指定服务于哪个容器 把所有的配置准备好了之后在往下走? 所以在Vue3中少了一个判断是否配置了el
?????????还有就是在最后卸载阶段的两个api的名字发生了改变 在Vue3中卸载的api分别为?beforeUnmount 、unmounted?
代码演示
? ? ? ? 下面我们通过代码来演示vue的生命周期
? ? ? ? 我们在App组件中使用了一个Hello组件? 为了能具体的演示生命周期的卸载阶段 我们在Hello组件加了一个v-if判断来演示组件的卸载
<template>
<div>
<button @click="isShow = !isShow ">点击是否显示组件</button>
<!-- if对应的表达式为假 组件将被卸载 -->
<Hello v-if="isShow"/>
</div>
</template>
<script>
import { ref } from "vue";
import Hello from './components/Hello.vue'
export default {
name: "App",
components: {
Hello
},
setup() {
// 为了能演示出来卸载的效果我们在这定义一个布尔值 是否显示组件
let isShow = ref(true)
return {
isShow
}
},
};
</script>
? ? ? ? 我们所有的生命周期函数将在Hello组件中定义?
<template>
<div>
<h1>我是Holle组件</h1>
<h3>当前的值是：{{sum}}</h3>
<!-- 修改数据触发更新阶段的生命周期钩子 -->
<button @click="sum++">点击加1</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: "Hello",
setup() {
let sum = ref(0)
return {
sum
}
},
//通过配置项的形式使用生命周期钩子
beforeCreate() {
console.log("---beforeCreate---");
},
created() {
console.log("---created---");
},
beforeMount() {
console.log("---beforeMount---");
},
mounted() {
console.log("---mounted---");
},
beforeUpdate() {
console.log("---beforeUpdate---");
},
updated() {
console.log("---updated---");
},
beforeUnmount() {
console.log("---beforeUnmount---");
},
unmounted() {
console.log("---unmounted---");
},
};
</script>? ? ? ? 运行出来我们可以看到所有的生命周期钩子都是按顺序触发的 一进入触发创建和挂载流程 放当我们修改数据后 触发更新流程?
? ? ? ? ?最后我们不想看了 点击关掉组件 触发卸载流程
?
Composition API 形式的生命周期钩子
????????Vue3.0提供了 Composition API 形式的生命周期钩子
? ? ? ??可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。
? ? ? ??因为?setup?是围绕?beforeCreate?和?created?生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在?setup?函数中编写。
????????这些函数接受一个回调函数，当钩子被组件调用时将会被执行
? ? ? ? 下面我们通过代码的形式演示：Composition API 形式的生命周期钩子的写法? (使用之前需要先引入)
...
// 引入api
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
export default {
name: "Hello",
setup() {
let sum = ref(0);
//通过组合式API的形式去使用生命周期钩子
onBeforeMount(() => {
console.log("---onBeforeMount---");
});
onMounted(() => {
console.log("---onMounted---");
});
onBeforeUpdate(() => {
console.log("---onBeforeUpdate---");
});
onUpdated(() => {
console.log("---onUpdated---");
});
onBeforeUnmount(() => {
console.log("---onBeforeUnmount---");
});
onUnmounted(() => {
console.log("---onUnmounted---");
});
return {
sum,
};
},
};
...????????下面我们在浏览中查看输出的信息， 一上来触发挂载时的钩子? 我们点击+1触发页面的更新这个时候更新的钩子就被触发
????????在我们点击卸载组件的时候 卸载阶段的钩子触发
一个小的补充：在使用了组合式API写了生命周期钩子，同时又使用了配置项的形式写了生命周期钩子 组合式API的优先级要高于配置项形式的生命周期钩子 组合式API定义的钩子会先执行。