vue 生命周期
组件从创建初始到销毁的过程中,经常会需要在某些时刻去执行一些逻辑代码,Vue在每个组件的生命周期过程(从创建到销毁)中暴露出很多的钩子函数,这些钩子函数都会在特定的时刻执行。
思考:
- 组件或者实例会在这个生命周期过程中会经历哪些阶段?这些阶段中组件或者实例都做了些什么?
- 生命周期钩子函数有哪些?分别在哪些时刻执行?有什么作用?
组件或者实例生命周期会经历三个阶段:初始化 ==> 运行中 ==> 销毁
-
初始化:
beforeCreate(){ console.log('执行该钩子函数时,数据还未挂载,dom也还没有渲染,基本没什么用') }
//挂载数据,绑定数据监听等 created(){ console.log('此时dom没有渲染,可以操作数据,并且不会触发运行中的钩子函数,经常在这里做数据的 初始化挂载' ) }
//查找组件或者实例的模板,进行编译,编译成虚拟dom结构放入到render函数中 beforeMount(){ console.log('可以访问数据,操作数据,dom还未渲染,可以做数据的初始化挂载,作用和created()一 样' ) }
//创建$el,并且执行render()函数 render(){ }
mounted(){ console.log('dom 重新渲染完成,标志初始化阶段完成') }
-
运行中(当数据更改的时候):
beforeUpdate(){ console.log('数据已经更新了,dom还没有重新渲染, 没有什么用,不能操作数据(死循环),dom也 没有操作的必要' ) }
//setter => watcher => 创建新的虚拟dom => diff对比 => 重新渲染 update(){ console.log('dom重新渲染完成,可以操作重新渲染之后的dom') }
-
销毁阶段:
//销毁组件只有一个途径:调用组件的$destory方法,切换组件其实也在销毁组件 beforeDestroy(){ console.log('此时还没有销毁,善后.....取消一些事件监听,解绑某些dom的事件') }
//取消所有的监听(数据监听,事件监听) destroyed(){ console.log('作用和beforeDestroy一样') }