阅读 1340

vue源码解析之生命周期原理

生命周期

beforeCreate:最初调用触发,data和events都不能用。可以在这里处理整个系统加载的Loading;

created:已经具有响应式的data,可以发送events。可以在这里去发送请求。

beforeMount:在模板编译后,渲染之前触发。SSR中不可用。基本用不上整个Hook。

mounted:在渲染之后触发,并可以访问组件中的DOM以及$ref,SSR中不可用。

beforeUpdate:在数据改变后,模板改变前触发。切勿使用它监听数据变化(使用计算属性和watch监听)。

updated:在数据改变后、模板改变后触发。常用于渲染后的打点、性能检测或者触发vue组件中非vue组件的更新。

beforeDestroy:组件卸载前触发,可以在此时清理事件、计时器或者取消订阅操作。

destroyed:卸载完毕后触发,可以做最后的打点或事件触发操作。

源码分析

initLifecycle

在vue初始化的时候会执行initLifecycle

initLifecycle会在beforeCreated钩子触发前调用,标志位在该方法中初始化为false,在对应的钩子函数触发后更新为true

callHook

这个方法用于执行钩子函数

拿到注册的钩子函数,遍历执行,因为一个实例通过mixins可能有很多个相同钩子,所以合并为数组

钩子函数触发时机

beforeCreate created

beforeMount mounted

initMixin方法中调用了vm.$mount,$mount中调用了mountComponent

beforeUpdate updated

activated deactivated

beforeDestory destoryed

vue系列课程

最近会陆续的对vue进行源码分析,一系列课程如下:

state系列

  1. props原理
  2. methods原理
  3. data原理
  4. computed原理
  5. watch原理

lifecycle系列

  1. 生命周期原理

event系列

  1. event原理

render系列

  1. render原理

inject/provide系列

  1. inject/provide原理

plugins系列

  1. vue-router原理
  2. Vue Router 那些事
  3. Vuex你应该知道的事
  4. vue源码解析之vuex原理
  5. Vue自定义插件

组件系列

  1. keep-alive原理
  2. Vue 单文件组件
  3. Vue组件间通信
  4. vue虚拟列表

指令系列

  1. Vue自定义指令
  2. vue源码解析之Directives原理

算法系列

  1. diff原理
  2. Vue编译器源码分析

异步任务

  1. vue源码解析之NextTick原理

其他

  1. vue单元测试
  2. Vue轮播组件
  3. 你不知道的vue那些事
  4. vue技巧大解密
  5. 面试-高级前端之VUE数据响应式实现
文章分类
前端
文章标签