[vue3快速入门] 5.vue对象的生命周期
关于vue对象的生命周期，我们之前已经用过一个mounted了，这节课我们把它的所有生命周期都学一遍，作为初学者，我们只需要大概知道这些生命周期函数的大概执行时机就行了，具体的细节可以以后熟练运用vue以后再学习也不晚。
首先每一个vue对象都有自己的生命周期，就像人一样，都有出生、学习、工作、生活、最后到死亡这样一个过程，那vue对象的生命周期分为四个阶段，创建（create），挂载（mount），更新（update），卸载（unmount）
创建可以理解为vue对象产生的阶段，
创建后vue对象就会挂载，就是把vue对象显示到dom中，我们在页面上就能看见了
当vue对象里的data发生变化时，就会触发更新阶段了
最后vue对象不再使用时，也就是它的unmount方法被调用时，就是卸载阶段
那么这四个阶段，每个阶段对应两个生命周期函数，一个之前、一个之后，还是比较好记的，
结合官方的图，我们就知道他们分别是什么，和执行顺序了
这8个生命周期函数：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted
如果开始学习时候嫌太多，记不住，可以只先记住一个mounted，表示vue组件已经显示在dom里了，最常用的就是在mounted回调函数里开始向后台请求数据。
我们来写一个完整的例子，来直观体验一下生命周期函数的执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>vue3</title>
</head>
<body>
<div id="app"></div>
<script src="https://www.unpkg.com/vue@next"></script>
<script>
// 生命周期示例
const vueApp = Vue.createApp({
data() {
return {
list: ['钢铁侠', '蜘蛛侠', '美国队长', '蝙蝠侠'],
}
},
beforeCreate() {
console.log('创建之前')
},
created() {
console.log('创建完成')
},
beforeMount() {
console.log('挂载之前')
},
mounted() {
console.log('挂载完成')
setTimeout(() => {
this.list.push('死侍')
}, 3000)
},
beforeUpdate() {
console.log('更新之前')
},
updated() {
console.log('更新完成')
},
beforeUnmount() {
console.log('卸载之前')
},
unmounted() {
console.log('卸载完成')
},
template: `
<div>生命周期示例</div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
`,
})
vueApp.mount('#app')
setTimeout(() => {
vueApp.unmount() // 最后调用组件unmount方法
}, 6000)
</script>
</body>
</html>
我们可以看到先输出了
创建之前
创建完成
挂载之前
挂载完成
3秒后在mounted里我们更改了list的值，触发了更新，输出
更新之前
更新完成
又过了3秒，我们调用了组件的unmount方法，在代码的最后，输出了
卸载之前
卸载完成
同时我们看到dom里的内容也没有了。
大家在熟练的使用了vue的基本操作以后，一定要回过头来再重新复习关于生命周期的知识，因为这些内容可以说是在面试中最常见的了。
