Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。生命周期又称为生命周期回调函数，生命周期函数，生命周期钩子。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。
测试页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
</style>
<script src="./js/vue.global.js"></script>
</head>
<body>
<div id="box">
<h1>{{name}}</h1>
</div>
<script type="text/javascript" >
const {createApp} = Vue
var app = createApp({
data(){
return {
name:'zhangsan',
}
},
}).mount("#box");
</script>
</body>
</html>
3.1. beforeCreate
在组件实例初始化完成之后立即调用。
会在实例初始化完成、props 解析之后、
data()和computed等选项处理之前立即调用。也就是在这个生命周期中,我们无法获取到data的数据,methods的函数,以及挂载的dom元素
beforeCreate() { console.log(this.name); console.log(">>>>>beforeCreate>>>>>"); }
3.2 created
在组件实例处理完所有与状态相关的选项后调用。
当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此
$el属性仍不可用。created(){ console.log(this.name); console.log(">>>>>create>>>>>"); }
我们可以在这个created生命周期,通过发送ajax请求,请求后台数据,进行数据的初始化
3.3 beforeMount
在组件被挂载之前调用。
当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
注意:
页面呈现的是未经过Vue编译的DOM结构
所有对DOM的操作,最终都不凑效
获取不到真实DOM元素
beforeMount() { console.log( document.querySelector("h1")); console.log(">>>>beforeMount>>>>"); }
3.4 mounted
在组件被挂载之后调用。
组件在以下情况下被视为已挂载：
所有同步子组件都已经被挂载。(不包含异步组件或
<Suspense>树内的组件)其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。
这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端被调用。
注意:
页面中呈现的是经过vue编译的DOM(真实DOM)
可以获取到真实DOM元素
对DOM的操作均有效(尽可能避免).至此初始化过程结束,一般在此进行,开启定时器,发送网络请求,订阅消息,绑定自定义事件等初始化操作
mounted() { console.log( document.querySelector("h1")); console.log(">>>>mounted>>>>>"); }
3.5 beforeUpdate
在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。
注意:
此时数据是新的,但页面是旧的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> </style> <script src="./js/vue.global.js"></script> </head> <body> <div id="box"> <h1>{{name}}</h1> <button @click="changeName()">修改</button> </div> <script type="text/javascript" > const {createApp} = Vue var app = createApp({ data(){ return { name:'zhangsan', } }, methods:{ changeName(){ this.name="lisi"; } }, beforeUpdate() { console.log("页面name值:",document.querySelector("h1").innerText); console.log("data中name值:",this.name); console.log(">>>>beforeUpdate>>>"); }, }).mount("#box"); </script> </body> </html>
3.6 updated
在组件因为一个响应式状态变更而更新其 DOM 树之后调用。
注意:
此时数据是新的,但页面是新的
updated() { console.log("页面name值:",document.querySelector("h1").innerText); console.log("data中name值:",this.name); console.log(">>>>updated>>>"); },
3.7 beforeUnmount
在一个组件实例被卸载之前调用。当这个钩子被调用时，组件实例依然还保有全部的功能。
注意:
此时,app实例中所有的data,methods,指令等等,都处于可用状态,马上要执行销毁过程,一般在此阶段,关闭定时器,取消订阅消息,解绑自定义事件等收尾操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> </style> <script src="./js/vue.global.js"></script> </head> <body> <div id="box"> <h1>{{name}}</h1> <button @click="changeName()">修改</button> <hello v-if="isShow"></hello> <button @click="destroy">点我销毁</button> </div> <script type="text/javascript" > const {createApp} = Vue //自定义一个hello组件 const hello = { data(){ return { hello:'你好' } }, template:`<h2>{{hello}}</h2>`, beforeUnmount() { console.log(this.hello); console.log(">>>>>beforeUnmount>>>>>"); }, } var app = createApp({ components:{ //注册组件 hello:hello, }, data(){ return { name:'zhangsan', isShow:true, } }, methods:{ changeName(){ this.name="lisi"; }, destroy(){ console.log("hello组件销毁中..."); this.isShow = false; } }, }).mount("#box"); </script> </body> </html>
3.8 unmounted
在一个组件实例被卸载之后调用。
一个组件在以下情况下被视为已卸载：
其所有子组件都已经被卸载。
所有相关的响应式作用 (渲染作用以及
setup()时创建的计算属性和侦听器) 都已经停止。unmounted() { console.log(">>>>>unmounted>>>>>"); }
![[CSS]常见布局技巧](https://img-blog.csdnimg.cn/a1d36e1f71704f06af7586907ea070a2.png)
