让你们更清楚的了解Vue 生命周期实现

原创 前端开发者 随笔 前端 216阅读 2019-04-29 21:58:29 举报

前言

在我们平时使用各种框架的时候,都避免不了使用到一种特性,就是 生命周期 钩子,这些钩子,可以给我们提供很多便利,让我们在数据更新的每一个阶段,都可以捕捉到它的变化。

我们最主要讲的是 vue 的生命周期,先来一份大纲:

  • beforeCreate(初始化界面前)
  • created(初始化界面后)
  • beforeMount(渲染dom前)
  • mounted(渲染dom后)
  • beforeUpdate(更新数据前)
  • updated(更新数据后)
  • beforeDestroy(卸载组件前)
  • destroyed(卸载组件后)

今天,我就来分析一下,vue 在调用到每一个生命周期前,到底都在做了什么?

正文

来看看官方的生命周期流程图:

这张图其实已经大概的告诉了我们,每个阶段做了什么,但是我觉得还有必要详细的去分析一下,这样在未来如果我们要实现类似于 vue 这种框架的时候,可以知道在什么时间,应该去做什么,怎么去实现。

beforeCreate(初始化界面前)

在一开始,先做了一个属性的合并处理,如果 options 存在并且 _isComponenttrue ,那么就调用 initInternalComponent 方法,这个方法最主要是优化内部组件实例化,因为动态选项合并非常缓慢,并且没有内部组件选项需要特殊处理;

如果不满足上述条件,就调用 mergeOptions 方法去做属性合并,最后的返回值赋值给 $options

做一个渲染拦截,这里的拦截,最主要是为了在调用 render 方法的时候,通过 vm.$createElement 方法进行 dom 的创建;

初始化了一些参数;

初始化事件,如果 _parentListeners 存在的话,更新组件的事件监听;

初始化渲染,defineReactive 的使用和作用,

到了这里执行完毕后,就调用到了 beforeCreate 方法。

created(初始化界面后)

在这里,其实最主要就是用来做不需要响应式的数据,官方文档:provide / inject

在处理完 inject 后,紧接着就做了 propsmethodsdatacomputedwatch 的初始化处理;

ProvideInject 作用其实是一样的,只是处理的方式不一样,具体区别请看官方文档:provide / inject

到这里执行完毕后,就要走到 created 钩子了。

beforeMount(渲染dom前)

在渲染 dom ,先检查了是否存在渲染位置,如果不存在的话,也就不会注册了;

beforeMount 这里,基本没做什么事情,只是做了一个 render 方法如果存在就绑定一下 createEmptyVNode 函数;

绑定完毕后,就执行了 beforeMount 钩子;

mounted(渲染dom后)

new Watcher 的时候,调用了 _render 方法,实现了 dom 的渲染,具体 _render 都做了什么,点击查看 vue 源码解析(实例化前) - 初始化全局 API(最终章)

在执行完实例化 Watcher 以后,如果 $node 不存在,就说明是初始化渲染,执行 mounted 钩子;

beforeUpdate(更新数据前)

如果当前的 vue 实例的 _isMountedtrue 的话,直接调用 beforeUpdate 钩子;

_isMounted 在 mounted 钩子执行前就已经设置为 true 了。

执行 beforeUpdate 钩子;

updated(更新数据后)

因为有多个组件的时候,会有很多个 watcher ,在这里,就是检查当前的得 watcher 是哪个,是当前的话,就直接执行当前 updated 钩子。

beforeDestroy(卸载组件前)

在卸载前,检查是否已经被卸载,如果已经被卸载,就直接 return 出去;

执行 beforeDestroy 钩子;

destroyed(卸载组件后)

其实这里就是把所有有关自己痕迹的地方,都给删除掉;

执行 destroyed 钩子。

总结

到这里,其实每一个生命周期的钩子做了什么,我们已经了解的差不多了,那这样大量的代码看起来可能不是很方便,所以我们做一个总结的 list

  • beforeCreate :初始化了部分参数,如果有相同的参数,做了参数合并,执行 beforeCreate
  • created :初始化了 InjectProvidepropsmethodsdatacomputedwatch,执行 created
  • beforeMount :检查是否存在 el 属性,存在的话进行渲染 dom 操作,执行 beforeMount
  • mounted :实例化 Watcher ,渲染 dom,执行 mounted
  • beforeUpdate :在渲染 dom 后,执行了 mounted 钩子后,在数据更新的时候,执行 beforeUpdate
  • updated :检查当前的 watcher 列表中,是否存在当前要更新数据的 watcher ,如果存在就执行 updated
  • beforeDestroy :检查是否已经被卸载,如果已经被卸载,就直接 return 出去,否则执行 beforeDestroy
  • destroyed :把所有有关自己痕迹的地方,都给删除掉;

结语

感谢您的观看,如有不足之处,欢迎批评指正。
获取资料👈👈👈
本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:👉👉👉582735936 👈👈👈,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复