依赖注入
优点:
- 祖先组件不需要知道哪些后代组件使用它提供的属性;
- 后代组件不需要知道被注入的属性来自哪里;
缺点:
- 组件间的耦合较为紧密,不易重构;
- 提供的属性是非响应式的;
源码分析
组件实例初始化的时候会调用Vue.prototype._init,vm._init中在data/props前面调用了initInjections,在data/props后面调用了initProvide
initInjections
该方法主要做了以下两件事:
- 获取vm.$options.inject,通过resolveInject方法找到对应的key集合;
- 遍历key集合,对其进行响应式监听;
resolveInject
该方法实现了通过$parent向上查找祖先节点数据;
- 是通过遍历source.$parent逐级向上查找的,知道找到为止
initProvide
该方法单纯把组件注册的provide值,赋值给vm._provided,resolveInject中有使用到
vue系列课程
最近会陆续的对vue进行源码分析,一系列课程如下: