Vue的生命周期

一 Vue的生命周期

二 生命周期的钩子

<div id="app">
    {{name}}
</div>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            name:'大哥',
        },
        methods:{
            init:function () {
                console.log(123)
            }
        },
        beforeCreate(){
            console.group('beforeCreate');
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        created(){
            console.group('created');
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        beforeMount(){
            console.group("beforeMount");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
         mounted(){
            console.group("mounted");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        beforeUpdate(){
            console.group("beforeUpdate");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        updated(){
            console.group("updated");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        beforeDestroy(){
            console.group("beforeDestroy");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        destroyed(){
            console.group("Destroy");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        }
    })
</script>

　　 1.beforecreated ：el 和 data 并未初始化

　　　created：完成了data数据的初始化

　　 2.beforeMount：完成了el 和 data的初始化

　　   mounted：完成了挂载

　　3.update相关

　　　　在浏览器里执行app.name='xxx'          触发了update相关的钩子函数~也就是说data里的值被修改会出发update的操作~

　　

　　　4.destory相关　　　

　　　　在浏览器console里执行命令：

　　　　　　app.$destroy();

　　　　　　触发了destroy相关的钩子函数，也就是说组件被销毁~

　　　　　　更改message的值~DOM中的值不变~也就是说DOM元素依然存在只是不受vue控制了~~