外贸品牌网站制作,企业网页建设公司咨询电话,品牌网站建设-建站之路,大学校园网络规划设计方案什么是生命周期#xff0c;有什么作用
定义#xff1a;vue 实例从创建到销毁的过程#xff0c;在某个特定的位置会触发一个回调函数 作用#xff1a;供开发者在生命周期的特定阶段执行相关的操作
生命周期分别有几个阶段
有四个阶段#xff0c;每个阶段有两个钩子…什么是生命周期有什么作用
定义vue 实例从创建到销毁的过程在某个特定的位置会触发一个回调函数 作用供开发者在生命周期的特定阶段执行相关的操作
生命周期分别有几个阶段
有四个阶段每个阶段有两个钩子一个前一个后 创建阶段 beforeCreate new Vue( ) 之后执行但所以数据都还无法访问 created 能拿到实例数据这里更改数据不会触发更新可使用this.$nextTick来执行要访问DOM的操作
挂载阶段 beforeMount template模版导入生成虚拟DOM更改数据不会出发更新 mounted 真实DOM挂载完毕可以用 $refs访问到真实DOM
更新阶段 beforeUpdate 响应式数据发生更新虚拟 DOM 生成在这个阶段修改数据不会重新渲染 updated 真实DOM完成更新这里修改数据可能会导致无限循环更新。
销毁阶段 beforeDestroy 销毁之前所以实例数据DOM都可以访问做组件销毁前的收尾工作如注销事件绑定清除定时器销毁占内存数据 destroyed组件被销毁DOM被移除
使用keepAlive缓存组件组件切换会触发actived / deactived两个钩子 actived: 相当于创建和挂载阶段 deactived: 相当于销毁阶段
生命周期执行顺序 第一次加载会执行 beforeCreatecreatedbeforeMountmounted 父子组件第一次渲染执行顺序子的渲染夹在父的beforeMount和mounted之间 父beforeCreate-父created-父beforeMount- 子组件加载四个阶段 -父mounted 更新子组件的数据子beforeUpdate-子updated 更新在父组件的数据也在子组件渲染 父beforeUpdate-子beforeUpdate-子updated-父updated 销毁过程父beforeDestroy-子beforeDestroy-子destroyed-父destroyed
