1,Vue 生命周期都有哪些?
序号 | 生命周期 | 描述 |
---|---|---|
1 | beforecreate 创建前 | vue实例初始化阶段,不可以访问data,methods; 此时打印出的this是undefined; |
2 | created 创建后 | vue实例初始化完成,可以访问data,methods,但是节点尚未挂载,不能获取dom节点; |
3 | beforeMount 挂载前 | 实际上与created阶段类似,同样的节点尚未挂载,此时模板已经编译完成,但还没有被渲染至页面中(即为虚拟dom加载为真实dom)注意的是这是在视图渲染前最后一次可以更改数据的机会,不会触发其他的钩子函数; |
4 | mounted 挂载完成 | 这个阶段说说明模板已经被渲染成真实DOM,实例已经被完全创建好了; |
5 | beforeUpdate 更新前 | data里面的数据改动会触发vue的响应式数据更新,也就是对比真实dom进行渲染的过程; |
6 | updated 更新完成 | data中的数据更新完成,dom节点替换完成 ; |
7 | activited | 在组件被激活时调⽤(使用了 <keep-alive> 的情况下); |
8 | deactivated | 在组件被销毁时调⽤(使用了 <keep-alive> 的情况下); |
9 | beforeDestroy 销毁前 | 销毁前执行($destroy方法被调用的时候就会执行),一般在这里善后:清除计时器、监听等; |
10 | destroyed 销毁后 | 销毁后 (Dom元素存在,只是不再受vue控制),卸载watcher,事件监听,子组件; |
2,父子组件生命周期执行顺序
->父beforeCreate
->父created
->父beforeMount
->子beforeCreate
->子created
->子beforeMount
->子mounted
->父mounted
验证如下图
:
更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
keep-alive
可以实现组件缓存,当组件切换时不会对当前组件进行卸载。
使用keepAlive后生命周期变化(重要):
首次进入缓存页面:beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存页面:beforeRouteEnter --> activated --> deactivated
注意: 配置了keepAlive的页面,在再次进入时不会重新渲染(第一次进来时会触发所有钩子函数),该页面内的组件同理不会再次渲染。
而这可能会导致该组件内的相关操作(那些每次都需要重新渲染页面的操作:如父子组件间的传值)不再生效。 这一点可能会导致一些莫名其妙而又无从查证的bug;