vue的生命周期

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

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

<!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: 完成挂载

 

posted @ 2018-08-17 11:03  Shimily  阅读(107)  评论(0)    收藏  举报