VUE生命周期中的钩子函数

1、vue的生命周期图
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的实例脱离了关系了
}

VUE生命周期中的钩子函数

相关推荐