vue 生命周期

实力的生命周期：实例在从创建到销毁的过程

钩子函数：在实例的生命周期中会自动调用一些函数，这些函数就是钩子函数：

作用：我们可以利用钩子函数，来定义自己需要的一些逻辑

生命周期：
   
    create(创建)：beforeCreate，created

    mount(挂载)：beforeMount,mounted

    update(更新)：beforeUpdate,updated

    destroy(销毁)：beforeDestroy,destroyed
    

var vm = new Vue({
        el: '#box',
        data: {
            msg: 'hello'
        },
        // 钩子函数书写的位置，和data，methods等配置同级
        beforeCreate: function () {
            console.group('beforeCreate~~~~~~~~~~~~~~~~~~~~')
            console.log('el:' + this.$el);
            console.log('data:' + this.$data);
            console.log('msg:' + this.msg);
            // 三者都没有创建
        },
        created: function () {
            console.group('created~~~~~~~~~~~~~~~~~~~~')
            console.log('el:' + this.$el);
            console.log('data:' + this.$data);
            console.log('msg:' + this.msg);
            // el没有创建，data和msg创建
        },
        beforeMount: function () {
            console.group('beforeMount~~~~~~~~~~~~~~~~~~~~')
            console.log('el:' + this.$el);
            console.log('data:' + this.$data);
            console.log('msg:' + this.msg);
            // el并没有真正的创建出来，而是进行了一个占位，data和msg创建
        },
        mounted: function () {
            console.group('mounted~~~~~~~~~~~~~~~~~~~~')
            console.log('el:' + this.$el);
            console.log('data:' + this.$data);
            console.log('msg:' + this.msg);
            // el是设置挂载  el： "selector"  用来将容器的数据进行关联 挂载
        },
        beforeUpdate: function () {
            console.group('beforeUpdate~~~~~~~~~~~~~~~~~~~~')
            console.log('el:' + this.$el);
            console.log('data:' + this.$data);
            console.log('msg:' + this.msg);
        },
        updated: function () {
            console.group('updated~~~~~~~~~~~~~~~~~~~~')
            console.log('el:' + this.$el);
            console.log('data:' + this.$data);
            console.log('msg:' + this.msg);
            // 数据更新后，这两个方法会执行
        },
        beforeDestroy: function () {
            console.group('beforeDestroy~~~~~~~~~~~~~~~~~~~~')
            console.log('el:' + this.$el);
            console.log('data:' + this.$data);
            console.log('msg:' + this.msg);
        },
        destroyed: function () {
            console.group('destroyed~~~~~~~~~~~~~~~~~~~~')
            console.log('el:' + this.$el);
            console.log('data:' + this.$data);
            console.log('msg:' + this.msg);
            // destroy  在实例销毁的时候执行
            // 实例销毁后，其身上所有的数据和方法都会销毁，不在生效
        },


    })