beforeCreate () {
// 创建前,还不能访问data与methods
window.console.log(this.xxx)
},
created () {
this.intervalTime = setInterval(() => {
window.console.log(123)
})
// 创建后,可以访问data与methods,但是还不能访问vue渲染后的dom
window.console.log('created', this.$refs.h1)
// 一般在created里发请求获取数据
},
beforeMount () {
// 渲染前,还是不能访问vue渲染后的dom,读取了需要渲染的dom,知道在哪个响应位置渲染,但是还没有渲染
window.console.log('beforeMount', this.$refs.h1)
},
mounted () {
// 渲染后,可以访问vue渲染后的dom,进入页面的dom操作
window.console.log('mounted', this.$refs.h1)
},
beforeUpdate () {
window.console.log('beforeUpdate')
// 更新前,vue页面上使用的相关数据已修改,但是还没有完成相应渲染
},
updated () {
window.console.log('updated')
// 更新后,vue页面上使用的相关数据已修改,且已完成相应渲染
},
beforeDestroy () {
// 销毁前,还没有销毁,准备销毁,什么都可以访问,往往用于一些善后工作
// clearInterval(this.intervalTime)
},
destroyed () {
// 销毁后,中断html与js联系(取消渲染),它还是可以访问data与methods
},
// 1:特点 2:使用场景 3:常用哪几个生命周期,为什么其它生命周期不怎么用
activated () {
// 激活时(显示时),第一次执行是在mounted之后执行,后面组件让缓存了,再次显示时,它会再次执行
window.console.log('activated')
},
deactivated () {
// 离开时(隐藏时),组件让缓存了,当我们切换路由离开(隐藏)时,它会执行
window.console.log('deactivated')
clearInterval(this.intervalTime)
}
Vue生命周期钩子函数浅析
最新推荐文章于 2022-04-27 01:02:20 发布