vue生命周期详解

title
vue声明周期,在每个声明周期中都干了些什么?

1, vue的生命周期

  • beforeCreate: 组件实例刚刚被创建,组件属性计算之前,如data属性
  • created: 组件实例创建完成,属性已绑定,但是DOM还未完成,$el属性还不存在
  • beforeMount:模板编译/挂载之前
  • mounted: 模板编译/挂载之后
  • beforeUpdate: 组件更新之前
  • updated: 组件更新之后
  • activated: for keep-alive,组件被激活时调用
  • deactivated: for keep-alive,组件被移除时调用
  • beforeDestroy: 组件销毁前被调用
  • destoryed: 组件销毁后调用

    ps:下面代码可以直接复制出去执行

    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
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
    <body>
    <div id="app">{{a}}</div>
    <script>
    var vm = new Vue({
    el: '#app',
    data: {
    a: 'vuejs',
    },
    beforeCreate: function() {
    console.log('创建前');
    console.log(this.a);
    console.log(this.$el);
    },
    created: function() {
    console.log('创建之后');
    console.log(this.a);
    console.log(this.$el);
    },
    beforeMount: function() {
    console.log('mount之前');
    console.log(this.a);
    console.log(this.$el);
    },
    mounted: function() {
    console.log('mount之后');
    console.log(this.a);
    console.log(this.$el);
    },
    beforeUpdate: function() {
    console.log('更新之前');
    console.log(this.a);
    console.log(this.$el);
    },
    updated: function() {
    console.log('更新完成');
    console.log(this.a);
    console.log(this.$el);
    },
    beforeDestroy: function() {
    console.log('组件销毁之前');
    console.log(this.a);
    console.log(this.$el);
    },
    destroyed: function() {
    console.log('组件销毁之后');
    console.log(this.a);
    console.log(this.$el);
    },
    })
    </script>
    </body>
    </html>

beforeCreated: el和data并未初始化
created: 完成data数据的初始化,el没有
beforeMount: 完成了el和data初始化
mounted: 完成挂载

title

1
打开命令行在命令行中输入vm.a = 'change';查看效果

title

activateddeactivated这两个生命周期函数涉及到<keep-alive>这个组件,所以想了解这个生命周期函数的可以看一下我的另一篇文章