Vue组件生命周期、钩子函数

beforeCreate

beforeCreate() {
                // 在组件还没有创建好时，是不能访问组件的任何方法和属性的
                console.log('beforeCreate 组件开始创建前')
            },

created

created() {
                // 组件创建好之后可以组件实例的变量和方法
                // 组件创建好之后不能访问dom
                //  $.post('user',function(res){
                //     this.username= res.data
                // })
                //可以在此钩子函数请求数据
                
                console.log('created 组件创建好了')
            },

beforeMount

 beforeMount() {
                // 挂载组件
                // 组件将要被挂载了、
                // 可以访问到要挂载的目标
                // 不能访问到组件的dom
                // 这里可以访问到dom 但不能访问到组件的dom只能访问到要挂载的目标dom
                console.log(this.$el) 
                console.log('beforeMount 组件开始挂载')
            },

mounted

mounted() {
                // 组件挂载完成
                // 只有当组件挂载完成之后才能访问到组件的dom
                console.log(this.$el) 
                console.log('mounted 组件挂载完成')

                // 必须通过mounted钩子之后去获取到组件的dom元素
            },

beforeUpdate

beforeUpdate() {
                // 只有更新和模板发生关联的数据才会触发这个钩子
                // 和模板绑定的数据更新之前
                console.log('beforeUpdate 和模板绑定的数据更新之前')
            },

updated

updated() {
                // 只有更新和模板发生关联的数据才会触发这个钩子
                // 和模板绑定的数据更新完成之后
                console.log('updated 和模板绑定的数据更新完成之后')
            },

beforeDestroy

beforeDestroy() {
                // 一般像页面组件 页面离开之前 保存数据 可以通过这个钩子来完成
                // 当组件销毁之前触发
                console.log('beforeDestroy 当组件销毁之前触发')
                console.log(this.$el)
            },

destroyed

destroyed() {
                // 当组件销毁之后触发
                console.log('destroyed 当组件销毁之后触发')
                //等待系统自动回收对象
                //销毁之后组件的对象还在，但是跟vue的实例脱离了关系了
            }