vue源码解析之inject/provide原理

4,628 阅读1分钟

依赖注入

优点:

  1. 祖先组件不需要知道哪些后代组件使用它提供的属性;
  2. 后代组件不需要知道被注入的属性来自哪里;

缺点:

  1. 组件间的耦合较为紧密,不易重构;
  2. 提供的属性是非响应式的;

源码分析

组件实例初始化的时候会调用Vue.prototype._init,vm._init中在data/props前面调用了initInjections,在data/props后面调用了initProvide

initInjections

该方法主要做了以下两件事:

  1. 获取vm.$options.inject,通过resolveInject方法找到对应的key集合;
  2. 遍历key集合,对其进行响应式监听;

resolveInject

该方法实现了通过$parent向上查找祖先节点数据;

  1. 是通过遍历source.$parent逐级向上查找的,知道找到为止

initProvide

该方法单纯把组件注册的provide值,赋值给vm._provided,resolveInject中有使用到

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数据响应式实现