Vue的生命周期

Posted CC。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue的生命周期相关的知识,希望对你有一定的参考价值。

1.1、实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。
比如 created 钩子可以用来在一个实例被创建之后执行代码:

 1 new Vue({
 2 data: {
 3 a: 1
 4 },
 5 created: function () {
 6 // `this` 指向 vm 实例
 7 console.log(\'a is: \' + this.a)
 8 }
 9 })
10 // => "a is: 1"

也有一些其它的钩子,在实例生命周期的不同场景下调用,如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。
不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch(\'a\', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的,this 不会是如你所预期的 Vue 实例,经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

1.2、生命周期图示

下图说明了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。

1. beforeCreate

在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。

2. created

实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。 可以在组件的这个期间请求数据,如果是keep-alive组件会被缓存起来,生命周期不会再次触发,如果需要更新数据可以watch当前router变化,如果router是当前组件所在的router则请求数据。

 1 methods : {
 2 getData : function(id){
 3 ...
 4 this.content = \'test\';
 5 }
 6 },
 7 created : function(){
 8 this.getData(this.id);
 9 }
10 ...
11 watch : {
12 $route : function(){
13 if(this.$route.name == \'xxx\'){
14 this.getData(this.id);
15 }
16 }
17 }

3. beforeMount

在挂载开始之前被调用:相关的 render 函数首次被调用。

4. mounted

vm.$el已挂载在文档内,对已有dom节点的操作可以在这期间进行。

5. beforeUpdate

数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。

可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。

6.updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。

7.activated

keep-alive 组件激活时调用。

8.deactivated

keep-alive 组件停用时调用。

9.beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用。

10.destroyed

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

2.生命周期示例一

示例1:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Vue2的生命周期</title>
 6         <style type="text/css">
 7             // <div> 不会显示,直到编译结束。
 8                 [v-cloak] {
 9                   display: none;
10                 }
11         </style>
12     </head>
13     <body>
14         <div id="app1">
15             <input v-model="msg" v-cloak/>
16             {{msg}}
17         </div>
18         <button onclick="destroy()">销毁</button>
19         <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
20         <script type="text/javascript">
21              //格式化输出
22             console.log("示例:%c%s","background:red;color:#fff","vue2生命周期","开始了");
23             console.log("你哈:%c%s,%c%s","color:green;","我是绿色","background:#ddd","我是灰色")
24             var app1 = new Vue({
25                 el:"#app1",
26                 data:{
27                     msg:\'vue\'
28                 },
29                 beforeCreate:function(){
30                     console.log("创建前:"+this.msg);
31                 },
32                 created:function(){
33                     console.log("创建后:"+this.msg+"."+this.$el);
34                 },
35                 beforeMount:function(){
36                     console.log("挂载前:");
37                     console.log(this.$el);
38                 },
39                 mounted:function(){
40                     console.log("挂载后:");
41                     console.log(this.$el);
42                 },
43                 beforeUpdate:function(){
44                     console.log("实例更新前:"+this.$el.innerHTML);
45                     console.log(this.msg);
46                     console.log(this.$el);
47                 },
48                 updated:function(){
49                     console.log("实例更新后:"+this.$el.innerHTML);
50                     console.log(this.msg);
51                     console.log(this.$el);
52                 },
53                 beforeDestroy:function(){
54                     console.log("销毁前");
55                     console.log(this.msg);
56                 },
57                 destroyed:function(){
58                     console.log("销毁后");
59                     console.log(this.msg);
60                 }
61                 
62             })
63             function destroy(){
64                 app1.$destroy();
65             }
66         </script>
67     </body>
68 </html>

初始化结果1:

修改msg的值为vue2后的结果:

 

执行销毁:

2.1生命周期示例二

示例2:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Vue2生命周期</title>
 6     </head>
 7     <body>
 8         <div id="app">{{ message }}</div>
 9         <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
10         <script type="text/javascript">
11             var app = new Vue({
12                 el: \'#app\',
13                 data: {
14                     message: "Study Vue生命周期!"
15                 },
16                 beforeCreate: function() {
17                     console.group(\'beforeCreate 创建前状态===============》\');
18                     console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
19                     console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
20                     console.log("%c%s", "color:red", "message: " + this.message)
21                 },
22                 created: function() {
23                     console.group(\'created 创建完毕状态===============》\');
24                     console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
25                     console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
26                     console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
27                 },
28                 beforeMount: function() {
29                     console.group(\'beforeMount 挂载前状态===============》\');
30                     console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
31                     console.log(this.$el);
32                     console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
33                     console.log("%c%s", "color:red", "message: " + this.message); //已被初始化  
34                 },
35                 mounted: function() {
36                     console.group(\'mounted 挂载结束状态===============》\');
37                     console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
38                     console.log(this.$el);
39                     console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
40                     console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
41                 },
42                 beforeUpdate: function() {
43                     console.group(\'beforeUpdate 更新前状态===============》\');
44                     console.log("%c%s", "color:red", "el     : " + this.$el);
45                     console.log(this.$el);
46                     console.log("以上是关于Vue的生命周期的主要内容,如果未能解决你的问题,请参考以下文章

在不存在的片段上调用片段生命周期和 onCreate 的问题

Android片段生命周期:onResume调用了两次

导航上的片段生命周期重叠

Android 片段生命周期

关于片段生命周期,何时调用片段的 onActivityResult?

理解片段事务期间片段的生命周期方法调用