【vue生命周期】

八个过程

beforeCreate（） 初始化之前，data中的数据和methods中的方法不能拿到，还没有初始化 用途：页面的重定向

created（） 初始化完成，data和methods已经初始化完成，第一个可以调用data和methods的生命周期 用途： 数据请求 数据初始化

beforeMount（） 虚拟的DOM挂载，页面中的数据还没有挂载

mounted（） 真实的DOM，第一个可以操作DOM元素的生命周期

beforeUpdate（） 可以执行0次或者更多次 更新之前，data中的数据是最新的，页面中的数据还是旧的，还没有同步

updated（） 更新之后，data中和页面中的数据都是最新的 同步完成

beforeDestroy（） 销毁之前 清空定时器 页面监听

destroyed（） 销毁之后

代码解析

// 初始化之前
            // 数据和方法不能拿到
            beforeCreate() {
                console.log(this);
                console.log(this.msg);
                console.log('beforeCreate');
            },
            // 初始化完成
            // 第一个可以调用的生命周期
            created() {
                this.msg = 20
                console.log(this.msg);
                console.log('cerated');
            },
            // 虚拟DOM挂载
            beforeMount() {
                console.log('beforeMount');
            },
            // 真实的DOM，第一个可以操作DOM元素的生命周期
            mounted() {
                console.log('mounted');
            },
            // 更新前  data数据是新的，页面数据还是旧的，尚未同步
            beforeUpdate() {
                console.log('beforeUpdate');
            },
            // 更新后 data和页面数据都是新的
            updated() {
                console.log('updated');
            },
            // 销毁前  清空定时器   页面监听
            beforeDestroy() {
                console.log('beforeDestroy');
            },
            // 销毁之后
            destroyed() {
                console.log('destroyed');
            }

图片解析