vue生命周期有8个钩子，最常用有3个：

• created() : data最早是在这个钩子创建
• mounted() : 完成初始渲染
• beforeDestroy() : 销毁前

生命周期钩子注意点

声明生命周期勾子时不能使用箭头函数，必须使用function，在function函数的勾子中this指向vue实例，而箭头函数的勾子this指向window

beforeCreate()

vue实例正在创建中 (此时el和data均未创建)，此时无法获取挂载点和data数据。

beforeCreate() {
                console.log(1);
                /* 注意点：这个勾子中 无法获取挂载点 和 data数据 （*/
                console.log( this.$el );
                console.log( this.msg );
            },

created()

vue实例完成创建 (此时el未创建，data创建）

created() {
                /* 注意点： 这个勾子创建了data，但是没有创建el */
                console.log( this.$el );
                console.log( this.msg );
            },

beforeMount()

vue实例完成创建 (挂载前el创建）此时el和data都已创建，但还没有将data数据渲染到el

beforeMount() {
                console.log(3);
                /* 注意点：这个勾子创建了el与data
                但是此时还没有将data数据渲染到el
                 */
                console.log( this.$el );
                console.log( this.msg );
            },

mounted()

完成初始挂载（此时将data数据渲染到el）

 mounted() {
                
            },

beforeUpdate()

data中任何数据改变都会执行这个钩子，此时只是监听数据变化，还未渲染

 beforeUpdate() {
                /* 注意点：监听数据变化，但是没有渲染 */
                console.log(5);
            },

updated()

这个钩子完成渲染修改后的数据

updated() {
                /* 这个勾子完成了修改后数据的渲染 */
                console.log(6);
            }

beforeDestroy()

销毁前，还没有销毁，准备销毁，什么都可以访问，用于一些善后处理。例如清除定时。

 beforeDestroy() {
                console.log(7);
            },

destroyed()

从destroyed的字面意思可知，中文意为是“销毁”的意思，当我们离开这个页面的时候，便会调用这个函数(具体可以看看vue的的生命周期)，销毁后，中断html与js联系(取消渲染)，它还是可以访问data与methods