VUE课程---18、生命周期函数

一、总结

一句话总结：

生命周期函数：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期函数！比如mounted()、beforeDestroy()等

 

 

1、生命周期钩子、生命周期函数、生命周期事件 的关系是什么？

生命周期钩子 = 生命周期函数 = 生命周期事件

生命周期钩子：就是生命周期事件的别名而已；

 

2、vue的生命周期函数分类？

a、创建期间的生命周期函数：beforeCreate()、created()、beforeMount()、mounted()
b、运行期间的生命周期函数：beforeUpdate()、updated()
c、销毁期间的生命周期函数：beforeDestroy()、destroyed()



a、创建期间的生命周期函数：
beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

b、运行期间的生命周期函数：
beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

c、销毁期间的生命周期函数：
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。


 

 

3、vue常用的生命周期方法？

*、created()/mounted(): 发送ajax请求, 启动定时器等异步任务
*、beforeDestroy(): 做收尾工作, 如: 清除定时器

 

 

 

二、生命周期函数

博客对应课程的视频位置：

 



1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>1、生命周期函数</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 生命周期函数本身是函数，所以写的时候直接就是函数（不会和对象弄混）
11 
12 1、什么是vue生命周期函数：
13 从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期函数！比如mounted、beforeDestroy等
14 
15 2、生命周期钩子、生命周期函数、生命周期事件 的关系是什么
16 生命周期钩子 = 生命周期函数 = 生命周期事件
17 生命周期钩子：就是生命周期事件的别名而已；
18 
19 3、vue的生命周期函数分类：
20 
21 a、创建期间的生命周期函数：
22 beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
23 created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
24 beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
25 mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
26 
27 b、运行期间的生命周期函数：
28 beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
29 updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
30 
31 c、销毁期间的生命周期函数：
32 beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
33 destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
34 
35 4、vue常用的生命周期方法
36 *、created()/mounted(): 发送ajax请求, 启动定时器等异步任务
37 *、beforeDestroy(): 做收尾工作, 如: 清除定时器
38 
39 
40 -->
41 <div id="app">
42     <p v-show="isShow">{{msg}}</p>
43     <button @click="isShow=!isShow">显示或隐藏msg</button>
44     <button @click="$destroy()">销毁vue实例</button>
45 </div>
46 <script src="../js/vue.js"></script>
47 <script>
48     let vm = new Vue({
49         el: '#app',
50         data: {
51             isShow:true,
52             msg: '我有一只小毛驴，我永远也不骑'
53         },
54         //1、创建期生命周期函数
55         beforeCreate:function () {
56             console.log('beforeCreate');
57             //console.log(this);
58         },
59         created:function () {
60             console.log('created');
61             //console.log(this);
62         },
63         beforeMount:function () {
64             console.log('beforeMount');
65             //console.log(this);
66         },
67         mounted:function () {
68             console.log('mounted');
69             //console.log(this);
70         },
71         //2、运行期间的生命周期函数
72         beforeUpdate:function () {
73             console.log('beforeUpdate');
74             //console.log(this);
75         },
76         updated:function () {
77             console.log('updated');
78             //console.log(this);
79         },
80         //3、销毁期间的生命周期函数
81         beforeDestroy:function () {
82             console.log('beforeDestroy');
83             //console.log(this);
84         },
85         destroyed:function () {
86             console.log('destroyed');
87             //console.log(this);
88         }
89     });
90 </script>
91 </body>
92 </html>


 

VUE课程---18、生命周期函数_数据