vue-生命周期

一、简介

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

 

二、钩子函数

vue实例生命周期中共包含8个钩子函数，最常用的钩子函数是created和mounted这两个。钩子函数演示效果：

一般我们希望在vue实例创建之后初始化数据，此时用created()钩子函数。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>vue生命周期</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           msg:"欢迎来到王者荣耀",
15         },
16         //methods用来存储方法
17         methods:{
18           update(){
19             this.msg="欢迎来到更新后的王者荣耀";
20           },
21           Destroy(){
22             this.$destroy();
23           }
24         },
25         //以下为vue生命周期的8个钩子函数
26         beforeCreate(){
27           alert('vue实例刚刚创建，未进行数据观测和事件配置');
28         },
29         created(){
30           alert('已进行数据观测和事件配置');
31         },
32         beforeMount(){
33           alert('模板编译之前，未挂载');
34         },
35         mounted(){
36           alert('模板编译之后，已挂载'); //此时才会渲染页面，才会显示页面上的数据
37         },
38         beforeUpdate(){
39           alert('vue实例更新之前');
40         },
41         updated(){
42           alert('vue实例更新后');
43         },
44         beforeDestroy(){
45           alert('vue实例销毁之前');
46         },
47         destroyed(){
48           alert('vue实例销毁后');
49         }
50 
51       })
52     }
53   </script>
54 </head>
55 <body>
56 <div id="hello">
57   {{msg}}
58   <br>
59   <button @click='update'>更新 Update</button>
60   <button @click='Destroy'>销毁 Destroy</button>
61 </div>
62 </body>
63 </html>

 

posted @ 2021-08-26 14:23  AnnLing  阅读(43)  评论(0)    收藏  举报