Vue - 01 生命周期

Vue有一套完整的生命周期，从开始创建、初始化数据、编译模板、挂在DOM、渲染、更新、渲染到销毁等一系列过程被称为Vue的生命周期。

 

总共分为三个阶段：初始化、运行中、销毁阶段。

 

生命周期过程具体说明：

  1. 实例通过new Vue()创建出来之后会初始化事件和生命周期，然后执行beforeCreate()函数，这个时候数据并没有挂载，只是一个空壳，无法访问到数据和真实DOM。
  2. 开始挂载数据、绑定事件等，然后执行created()函数，这个时候可以使用和更改数据，在这里更改数据，不会触发updated()函数，这是渲染前倒数第二次可以更改数据的机会，这样不会触发其他钩子函数，一般在这里做初始数据的获取。
  3. 开始寻找实例或组件对应的模板，将模板编译为虚拟DOM放入到render()函数中准备渲染，然后执行beforeMount()函数，在此函数中虚拟DOM已经创建完成，即将渲染，这是渲染前最后一次更改数据的机会，不会触发其他钩子函数，一般在这里做初始数据的获取。
  4. 开始渲染，渲染出真实DOM，然后执行mounted()函数，此时组件已经出现在页面中，数据和真实DOM都处理完毕，事件也挂载好了，在这里可以操作真实DOM等。
  5. 当组件或实例数据更改后，会执行beforeUpdate()函数，然后Vue的虚拟DOM机制会重新构建虚拟DOM并与上一次的虚拟DOM利用diff算法进行对比，之后重新渲染。
  6. 更新完成后，执行updated()函数，数据此时已经更改完成，DOM也重新渲染完毕，可以操作更新后的虚拟DOM。
  7. 当经过某种途径调用了$destroy()方法后，将立即执行beforeDestroy()函数，这里一般做一些善后工作，如清除定时器等。
  8. 最后将组件或实例的数据绑定、监听去掉后，只剩下DOM空壳，这时也可以执行destroyed()函数，这里主要也是做善后工作。

其中常用的函数：

  1. created()：实例创建完成后使用。此阶段完成了数据的观测，但是未挂载，el此时还不可用，一般在这里初始化处理一些数据。
  2. mounted():el挂载到实例后调用。可在此使用ajax或axios获取服务端数据。
  3. beforeDestroy():实例被销毁前调用。主要用来清除定时器、解绑监听的事件等。
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7         <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8         <title>
 9             定时更新的广告栏
10         </title>
11         <style>
12         </style>
13     </head>
14     
15     <body>
16        <div id="Mbox" style="background-color: black;width: 500px;height: 100px;text-align: center;line-height: 100px;margin: auto;">
17            <h3 style="color:white;">
18                 {{a}}
19            </h3>
20        </div>
21     </body>
22 </html>
23 
24 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
25 <script>
26     var app=new Vue({
27         el:"#Mbox",
28         data:{
29             list:[],
30             index:0,
31             a:""
32         },
33         //实例创建后初始化数据
34         created:function(){
35             this.list=["地球交通委提醒您：",
36             "道路千万条",
37             "安全第一条",
38             "行车不规范",
39             "亲人两行泪"];
40             this.a=this.list[0];
41         },
42         //el挂载到实例后，创建定时器
43         mounted:function(){
44             var t=this;
45             this.time=setInterval(function(){
46                 if(t.index<t.list.length-1){
47                     t.index++;
48                 }
49                 else {
50                     t.index=0;
51                 };
52                 t.a=t.list[t.index];
53             },3000)
54         },
55         //销毁前清除定时器
56         beforeDestroy:function(){
57             if (this.time) {
58                 clearInterval(this.time);
59                 console.log(this.a);
60             }
61         }
62         
63     })
64 </script>
常用函数的使用示例

 

posted @ 2020-08-25 00:51  猹岛  阅读(56)  评论(0)    收藏  举报