学习vue源码（18）三探生命周期之初始化provide与inject

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

inject:[‘message’],

template:‘

{{message}}

’

})

Vue.component(‘test’,{

template:<div><child></child></div>

})

new Vue({

el:‘#app’,

provide:{message:‘Hello Vue!’}

})

provide/injec就是做这个用的，多层嵌套时用起来不要太爽噢

源码分析

---

provide

// src/core/instance/inject.js

export function initProvide (vm: Component) {

const provide = vm.$options.provide

if (provide) {

vm._provided = typeof provide === ‘function’

? provide.call(vm)

provide

}

}

provide 是向下传递数据的选项。这里先拿到 provide 选项中的内容，如果有 provide 选项，将 provide 选项传递给 vm._provided 变为 Vue 实例全局数据。

这里看一下例子更清楚，下例中传入数据 foo，数据内容为 bar。

var Provider = {

provide: {

foo: ‘bar’

},

// …

}

inject

// src/core/instance/inject.js

export function initInjections (vm: Component) {

const result = resolveInject(vm.$options.inject, vm)

if (result) {

observerState.shouldConvert = false

Object.keys(result).forEach(key => {

defineReactive(vm, key, result[key])

})

observerState.shouldConvert = true

}

}

简化后的源码可以看到，首先通过 resolveInject 方法获取 inject 选项搜索结果，如果有搜索结果，遍历搜索结果并为其中的数据添加 setter 和 getter。

接着来看下 resolveInject 方法：

export function resolveInject (inject: any, vm: Component): ?Object {

if (inject) {

const result = Object.create(null)

// 获取 inject 选项的 key 数组

const keys = hasSymbol

? Reflect.ownKeys(inject).filter(key => {

/* istanbul ignore next */

return Object.getOwnPropertyDescriptor(inject, key).enumerable

})

Object.keys(inject)

for (let i = 0; i < keys.length; i++) {

const key = keys[i]

const provideKey = inject[key].from

let source = vm

while (source) {

if (source._provided && provideKey in source._provided) {

result[key] = source._provided[provideKey]

break

}

source = source.$parent

}

if (!source) {

if (‘default’ in inject[key]) {

const provideDefault = inject[key].default

result[key] = typeof provideDefault === ‘function’

? provideDefault.call(vm)

provideDefault

} else if (process.env.NODE_ENV !== ‘production’) {

warn(Injection "${key}" not found, vm)

}

}

}

return result

}

}

获取 inject 选项的 key 数组

遍历 key 数组，通过向上冒泡来查找 provide 中是否有 key 与 inject 选项中 from 属性同名的

如果有，则将这个数据传递给 result；

如果没有，检查 inject 是否有 default 选项设定默认值或者默认方法，如果有则将默认值返传给 result，最终返回 result 对象。

所以，inject 的写法应该是有 default 默认值的：

const Child = {

inject: {

foo: { default: ‘foo’ }

}

}

或者是有 from 查找键和 default 默认值的：

const Child = {

inject: {

foo: {

from: ‘bar’,

default: ‘foo’

}

}

}

或者为 default 默认值设定一个工厂方法：

const Child = {

inject: {

foo: {

from: ‘bar’,

default: () => [1, 2, 3]

}

}

}

好吧，我承认这就是引用的官网的三个例子~ 不过意思到就好啦。

[

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
为例，我整理了如下的面试题。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-ztT7Hn4E-1713555422431)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！