目录:
- 对Vue生命周期的理解
- Vue 的父组件和子组件生命周期钩子函数执行顺序
- 生命周期内调用异步请求
(1) 生命周期是什么?
Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。
(2)各个生命周期的作用
用表格描述:
beforeCreate | 组件实例被创建之初,组件的属性生效之前 |
created | 组件实例已经完全创建,属性也绑定,但真实 dom 还没有生成,$el 还不可用 |
beforeMount | 在挂载开始之前被调用:相关的 render 函数首次被调用 |
mounted | el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子 |
beforeUpdate | 组件数据更新之前调用,重新构建的虚拟 DOM与上次的虚拟dom ,通过diff算法进行对比 |
updated | 组件更新之后,数据更改完成,dom也重新render完成 |
activited | keep-alive 专属,组件被激活时调用 |
deadctivated | keep-alive 专属,组件被销毁时调用 |
beforeDestory | 组件销毁前调用,做一些善后工作,例如清楚计时器,清除非指令绑定的事件等等 |
destoryed | 组件销毁后调用 |
附上腾讯课堂视频讲解vue生命周期图:
8、Vue 的父组件和子组件生命周期钩子函数执行顺序
Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分:
-
加载渲染过程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted -
子组件更新过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated -
父组件更新过程
父 beforeUpdate -> 父 updated -
销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
9、在哪个生命周期内调用异步请求?
可以在钩子函数 created、beforeMount、mounted 中进行调用,因为在这三个钩子函数中,data 已经创建,可以将服务端端返回的数据进行赋值。
推荐在 created 钩子函数中调用异步请求,因为在 created 钩子函数中调用异步请求有以下优点:
- 能更快获取到服务端数据,减少页面 loading 时间;
- 阶段可以访问data,使用watcher、events、methods,也就是说 数据观测(data observer) 和event/watcher 事件配置 已完成。
- ssr 不支持 beforeMount 、mounted 钩子函数,所以放在 created 中有助于一致性;