Vue3 -- 生命周期函数（钩子）
Vue生命周期
Vue 实例从开始创建、初始化数据、编译模板、挂载DOM、更新渲染、卸载等一系列的过程，我们称这是 Vue 的生命周期。
Vue生命周期的作用
Vue 所有功能实现都是围绕生命周期进行；
在不同阶段调用对应的钩子，实现组件数据管理和DOM渲染；
生命周期函数（钩子）
生命周期函数是指在某一时刻自动执行的函数。
Vue生命周期图示
从图中可以看出，Vue的生命周期包括初始化、挂载、更新和销毁四个阶段，八个生命周期。
Vue各生命周期函数的描述
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue生命周期函数</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data(){
return {
content: Hello Vue.js!
}
},
beforeCreate(){
console.log(document.getElementById(root).innerHTML, beforeCreate);
},created(){
console.log(document.getElementById(root).innerHTML, created);
},beforeMount(){
console.log(document.getElementById(root).innerHTML, beforeMount);
},mounted(){
console.log(document.getElementById(root).innerHTML, mounted);
},beforeUpdate(){
console.log(document.getElementById(root).innerHTML, beforeUpdate);
},updated(){
console.log(document.getElementById(root).innerHTML, updated);
},beforeUnmount(){
console.log(document.getElementById(root).innerHTML, beforeUnmount);
},unmounted(){
console.log(document.getElementById(root).innerHTML, unmounted);
},
template:<div>{
{content}}</div>
})
const vm = app.mount(#root);
</script>
</body>
</html>
页面效果
打开浏览器，控制台成功输出：Hello Vue.js!
第一次页面加载会触发beforeCreate() ，created() ，beforeMount() ，mounted() 四个钩子，并只有mounted()输出DOM，结果符合预期。
更新数据触发beforeUpdate()，updated()，控制台输出符合预期，页面内容更新为hello。
销毁应用触发beforeUnmount()，unmounted()，控制台输出符合预期,页面内容更新为空。
总结
-
第一次页面加载会触发beforeCreate() ，created() ，beforeMount() ，mounted() 更新数据触发beforeUpdate()，updated() 销毁应用触发beforeUnmount()，unmounted()
结语
本小节到此结束，谢谢大家的观看！
如有问题欢迎各位指正