1. beforeCreate
beforeCreate() {
//在组件还没有创建好时，是不能访问组件的任何方法和属性的
console.log('beforeCreate 组件开始创建前')
},
2. created
created() {
// 组件创建好之后可以组件实例的变量和方法
// 组件创建好之后不能访问dom
// $.post('user',function(res){
// this.username= res.data
// })
//可以在此钩子函数请求数据
console.log('created 组件创建好了')
},
3. beforeMount
beforeMount() {
// 挂载组件
// 组件将要被挂载了、
// 可以访问到要挂载的目标
// 不能访问到组件的dom
// 这里可以访问到dom 但不能访问到组件的dom只能访问到要挂载的目标dom
console.log(this.$el)
console.log('beforeMount 组件开始挂载')
},
4. mounted
mounted() {
// 组件挂载完成
// 只有当组件挂载完成之后才能访问到组件的dom
console.log(this.$el)
console.log('mounted 组件挂载完成')
// 必须通过mounted钩子之后去获取到组件的dom元素
}
5. beforeUpdate
beforeUpdate() {
// 只有更新和模板发生关联的数据才会触发这个钩子
// 和模板绑定的数据更新之前
console.log('beforeUpdate 和模板绑定的数据更新之前')
}
6. updated
updated() {
// 只有更新和模板发生关联的数据才会触发这个钩子
// 和模板绑定的数据更新完成之后
console.log('updated 和模板绑定的数据更新完成之后')
},
7. beforeDestroy
beforeDestroy() {
// 一般像页面组件 页面离开之前 保存数据 可以通过这个钩子来完成
// 当组件销毁之前触发
console.log('beforeDestroy 当组件销毁之前触发')
console.log(this.$el)
}
8. destroyed
destroyed() {
// 当组件销毁之后触发
console.log('destroyed 当组件销毁之后触发')
//等待系统自动回收对象
//销毁之后组件的对象还在，但是跟vue的实例脱离了关系了
}
