Vue生命周期函数

<script>


        var app = new Vue({
                el: "#app",
                template: '<div>{{message}}</div>',
                data: {
                    message: 'hello world',
                },


                // vue实例基础初始化之后，就会触发
                beforeCreate: function() {
                    console.log('beforeCreate', 'this.message = ' + this.message);
                },

                // created在实例创建完成后被立即调用 挂载阶段还没开始 $el 属性目前尚不可用
                created: function() {
                    console.log('created', 'this.message= ' + this.message, 'this.$el =' + this.$el);
                },

                // 如果没有template模板，就会将el内的当成模板
                // 如果有template，就会用template里的东西
                // beforeMount：当和模板结合，在渲染页面之前的一瞬间，执行beforeMount函数（还没有渲染到页面上————用模板的情况下）
                beforeMount: function() {
                    console.log('beforeMount', 'this.$el =' + this.$el);
                },

                // 这时候hello World就会渲染在页面上了
                // mounted就会自动执行（已经渲染了）

                mounted: function() {
                    console.log("mounted", this.$el);
                },

                // 实例还没有销毁，在销毁的前一刻
                // 销毁实例：app.$destroy()
                beforeDestroy: function() {
                    console.log("beforeDestory", 'this.message= ' + this.message);
                },
                // 实例被销毁了
                destroyed: function() {
                    console.log("destoryed", 'this.message= ' + this.message);
                },
                // 数据发生改变，还没渲染之前
                beforeUpdate: function() {
                    console.log("beforeUpdate");
                    console.log(this.$el);
                },
                // 数据改变，渲染之后
                updated: function() {
                    console.log("updated");
                    console.log(this.$el);
                }



            })
            // app.message = 'hello'
            // app.$destroy();
    </script>