VUE生命周期

1、vue的生命周期：

从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，这就是vue的生命周期，简单点来说，就是vue实例从诞生到结束的过程，生命周期又称为生命周期回调函数，生命周期函数，生命周期钩子。

1.1、beforeCreated函数

在组件实例初始化完成之后立即调用。

会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。也就是在这个生命周期中,我们无法获取到data的数据,methods的函数,以及挂载的dom元素。
eg:

beforeCreate() {
console.log(this.name);
console.log(“>>>>>beforeCreate>>>>>”);
}

1.2、created函数

在组件实例处理完所有与状态相关的选项后调用。

当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。

created(){
console.log(this.name);
console.log(“>>>>>create>>>>>”);
}

在这个created生命周期,通过发送ajax请求,请求后台数据,可以让我们进行数据的初始化。

1.3、beforeMount函数

在组件被挂载之前调用。当这个函数被调用的时候，组件已经完成了其响应式状态的设置，但还没有创建DOM节点，即将首次进行DOM渲染过程。
注意：1. 页面呈现的是未经过Vue编译的DOM结构
2. 所有对DOM的操作,最终都不凑效
3. 获取不到真实DOM元素

eg:

beforeMount() {
console.log( document.querySelector(“h1”));
console.log(“>>>>beforeMount>>>>”);
}

1.4、mounted函数

在组件被挂载后被调用。
视为已挂载的情况：
1、所有同步子组件都已经被挂载（不包含异步组件或 树内的组件）
2、其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。

这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端被调用。

注意点：

1. 页面中呈现的是经过vue编译的DOM(真实DOM)
2. 可以获取到真实DOM元素
3. 对DOM的操作均有效(尽可能避免).至此初始化过程结束,一般在此进行,开启定时器,发送网络请求,订阅消息,绑定自定义事件等初始化操作

eg:

mounted() {
console.log( document.querySelector(“h1”));
console.log(“>>>>mounted>>>>>”);
}

1.5、beforeUpdate函数

在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。
此时数据是新的，但是在页面展示的数据还是旧的。

<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>  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

1.6、updated函数

在组件因为一个响应式状态更新变更其DOM树后调用。
此时数据和页面显示都是新的。

updated() {
console.log(“页面name值:”,document.querySelector(“h1”).innerText);
console.log(“data中name值:”,this.name);
console.log(“>>>>updated>>>”);
},

1.7、beforeUnmount函数

在一个组件实例被卸载之前调用。当这个钩子被调用时，组件实例依然还保有全部的功能。

注意点：
此时,app实例中所有的data,methods,指令等等,都处于可用状态,马上要执行销毁过程,一般在此阶段,关闭定时器,取消订阅消息,解绑自定义事件等收尾操作。

<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>  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

1.8、unmounted函数

在一个组件实例被卸载之后调用。
视为已卸载的情况：

• 其所有子组件都已经被卸载。
• 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。