vue的生命周期和执行顺序

C_心欲无痕

已于 2023-07-24 15:36:27 修改

阅读量1.1k

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-17 14:24:05 首次发布

本文链接：https://blog.csdn.net/qq_43886365/article/details/131764421

版权

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；

关注