生命周期函数
生命周期:是指一个对象从创建到运行到销毁的整个过程,被称为生命周期
生命周函数:在不同的生命周期阶段会自动执行对应的函数,而这些函数则被成为生命周期函数
// 创建阶段
beforeCreate() {
// 这个生命周函数,代表开始创建实例了
console.log('beforeCreate',this.num)
},
created () {
// 代表数据和方法已经初始化成功了,此处dom还没有挂载到页面上
console.log('created',this.num,this.$el)
},
beforeMount () {
// 挂在之前
console.log('beforeMount',this.$el)
},
mounted () {
// dom已经挂载了
console.log('mounted',this.$el)
},
// 运行更新阶段
beforeUpdate () {
// 数据更新,页面还没有同步
console.log('beforeUpdated',this.num,document.getElementById('app').innerHTML)
},
updated () {
// 数据更新,页面已经同步
console.log('updated',this.num,document.getElementById('app').innerHTML)
},
// 销毁阶段
beforeDestroy () {
// 销毁之前
console.log('beforeDestroy')
},
destroyed () {
// 已经销毁了
console.log('destroy')
}
如果使用 keep-alive
包裹组件
该组件将新增两个生命周期函数
// 可用与keep-alive包裹组件时 请求数据
activated(){} // 进入该组件时调用
deactivated(){} // 退出组件是调用