Vue.js 源码分析(八) 基础篇 依赖注入 provide/inject组合详解
先来看看官网的介绍:
简单的说，当组件的引入层次过多，我们的子孙组件想要获取祖先组件的资源，那么怎么办呢，总不能一直取父级往上吧，而且这样代码结构容易混乱。这个就是这对选项要干的事情
provide和inject需要配合使用，它们的含义如下:
provide ;一个对象或返回一个对象的函数，该对象包含可注入起子孙的属性，可以使用ES6的Symbols作为key(只有原生支持Symbol才可以)
inject ;一个字符串数组或一个对象
;字符串数组 ;provide对象里哪些属性可用
;一个对象 ;key是本地的绑定名，value是provide里对应的对象名，也可以是一个对象，此时from属性是provide里对应的对象名，default属性是不存在时的默认值
来个例子理解一下
<!DOCTYPE html> <!--例1-->
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app"><child></child></div>
<script>
Vue.component('child',{
inject:['message'],
template:'<p>{{message}}</p>'
})
new Vue({
el:'#app',provide:{message:'Hello Vue!'}
})
</script>
</body>
</html>
输出:Hello Vue!,对应的DOM节点渲染为:
是不是感觉和props的传值差不多，当然这不是 provide/inject该干的事情，我们在中间再嵌套一层组件就知道他的用处了，例如:
<!DOCTYPE html> <!--例2-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app"><test></test></div>
<script>
Vue.component('child',{
inject:['message'],
template:'<p>{{message}}</p>'
})
Vue.component('test',{
template:`<div><child></child></div>`
})
new Vue({
el:'#app',provide:{message:'Hello Vue!'}
})
</script>
</body>
</html>
输出:Hello Vue!,对应的DOM节点渲染为:
provide/injec就是做这个用的，多层嵌套时用起来不要太爽噢
源码分析
provide/inject组合的源码分为三个部分，分别是组件注册、Vue实例化和组件实例化的过程，如下:
组件注册时
注册时会执行Vue.extend()(第4770行)，内部会执行mergeOptions()合并一些属性,mergeOptions如下:
function mergeOptions ( //第1451行
parent,
child,
vm
) {
{
checkComponents(child);
} if (typeof child === 'function') {
child = child.options;
} normalizeProps(child, vm);
normalizeInject(child, vm); //对inject进行一次规范化
normalizeDirectives(child);
var extendsFrom = child.extends;
if (extendsFrom) {
parent = mergeOptions(parent, extendsFrom, vm);
}
if (child.mixins) {
for (var i = 0, l = child.mixins.length; i < l; i++) {
parent = mergeOptions(parent, child.mixins[i], vm);
}
}
var options = {};
var key;
for (key in parent) {
mergeField(key);
}
for (key in child) {
if (!hasOwn(parent, key)) {
mergeField(key);
}
}
function mergeField (key) {
var strat = strats[key] || defaultStrat;
options[key] = strat(parent[key], child[key], vm, key);
}
return options
}
normalizeInject定义如下:
function normalizeInject (options, vm) { //第1398行
var inject = options.inject;
if (!inject) { return }
var normalized = options.inject = {};
if (Array.isArray(inject)) { //如果inject是一个数组
for (var i = 0; i < inject.length; i++) { //遍历inject
normalized[inject[i]] = { from: inject[i] }; //保存到normalized里面，例如:{foo: {from: "foo"}}
}
} else if (isPlainObject(inject)) { //如果inject是一个对象
for (var key in inject) {
var val = inject[key];
normalized[key] = isPlainObject(val)
? extend({ from: key }, val)
: { from: val };
}
} else {
warn(
"Invalid value for option \"inject\": expected an Array or an Object, " +
"but got " + (toRawType(inject)) + ".",
vm
);
}
}
对于例1来说，mergeOptions()之后inject等于:{message: {from: "message"}},如下:
writer by:大沙漠 QQ:22969969
Vue实例化时
执行_init()时会执行mergeOptions()进行数据的合并，对于provide的合并策略等于mergeDataOrFn()函数(和data的合并策略是一样的，定义在1321行),返回一个匿名函数(第1154行)，如下:
function mergeDataOrFn ( //第1154行
parentVal,
childVal,
vm
) {
if (!vm) { //这是组件的分支
// in a Vue.extend merge, both should be functions
if (!childVal) {
return parentVal
}
if (!parentVal) {
return childVal
}
// when parentVal & childVal are both present,
// we need to return a function that returns the
// merged result of both functions... no need to
// check if parentVal is a function here because
// it has to be a function to pass previous merges.
return function mergedDataFn () {
return mergeData(
typeof childVal === 'function' ? childVal.call(this, this) : childVal,
typeof parentVal === 'function' ? parentVal.call(this, this) : parentVal
)
}
} else { //这是非组件的实例，返回一个函数
return function mergedInstanceDataFn () {
// instance merge
var instanceData = typeof childVal === 'function'
? childVal.call(vm, vm)
: childVal;
var defaultData = typeof parentVal === 'function'
? parentVal.call(vm, vm)
: parentVal;
if (instanceData) {
return mergeData(instanceData, defaultData)
} else {
return defaultData
}
}
}
}
然后返回到_init()之后会调用initProvide()初始化provide:
function initProvide (vm) { //第3619行
var provide = vm.$options.provide; //尝试获取provide
if (provide) { //如果provide存在,当它是函数时执行该返回，否则直接将provide保存到Vue实例的_provided属性上
vm._provided = typeof provide === 'function'
? provide.call(vm)
: provide;
}
}
返回后_provided等于{message:"Hello Vue!"}，如下
组件实例化时
_init()时会执行initInjections()，经过了前面两步的处理，这里比较简单了，直接从父Vue或父Vue的父Vue获取对应的值即可，如下:
function initInjections (vm) { //第2681行 初始化inject
var result = resolveInject(vm.$options.inject, vm); //遍历祖先节点，获取对应的inject,例如:比如:{foo: "bar"}
if (result) { //如果获取了对应的值，则将它变成响应式
toggleObserving(false);
Object.keys(result).forEach(function (key) {
/* istanbul ignore else */
{
defineReactive(vm, key, result[key], function () { //将key编程响应式，这样就可以访问该元素了
warn(
"Avoid mutating an injected value directly since the changes will be " +
"overwritten whenever the provided component re-renders. " +
"injection being mutated: \"" + key + "\"",
vm
);
});
}
});
toggleObserving(true);
}
}
function resolveInject (inject, vm) { //第3649行 确定Inject inject:例如:{foo: {from: "foo"}} vm:当前组件的实例
if (inject) { //如果inject非空
// inject is :any because flow is not smart enough to figure out cached
var result = Object.create(null); //存储最后的结果
var keys = hasSymbol
? Reflect.ownKeys(inject).filter(function (key) { //如果有符号类型，调用Reflect.ownKeys()返回所有的key，再调用filter
/* istanbul ignore next */
return Object.getOwnPropertyDescriptor(inject, key).enumerable
})
: Object.keys(inject); //获取所有的key，此时keys就是个字符串数组,比如:["foo"]
for (var i = 0; i < keys.length; i++) { //这里遍历每个key
var key = keys[i];
var provideKey = inject[key].from;
var source = vm;
while (source) {
if (source._provided && hasOwn(source._provided, provideKey)) { //如果source存在_provided 且 含有provideKey这个属性
result[key] = source._provided[provideKey]; //则将值保存到result[key]中
break //并跳出while循环
}
source = source.$parent; //否则将source赋值给父Vue实例，直到找到对应的providekey为止
}
if (!source) { //如果最后source不存在，即没有从当前实例或祖先实例的_provide找到privideKey这个key
if ('default' in inject[key]) {
var provideDefault = inject[key].default; //如果有定义defult,则使用默认值
result[key] = typeof provideDefault === 'function'
? provideDefault.call(vm)
: provideDefault;
} else {
warn(("Injection \"" + key + "\" not found"), vm);
}
}
}
return result //返回结果，比如:{foo: "bar"}
}
}
注:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
Vue.js 源码分析(八) 基础篇 依赖注入 provide/inject组合详解的更多相关文章
- Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解
先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...
- Vue.js 源码分析(九) 基础篇 生命周期详解
先来看看官网的介绍: 主要有八个生命周期,分别是: beforeCreate.created.beforeMount.mounted.beforeupdate.updated .beforeDes ...
- Vue.js 源码分析(十三) 基础篇 组件 props属性详解
父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...
- Vue.js 源码分析(四) 基础篇 响应式原理 data属性
官网对data属性的介绍如下: 意思就是:data保存着Vue实例里用到的数据,Vue会修改data里的每个属性的访问控制器属性,当访问每个属性时会访问对应的get方法,修改属性时会执行对应的set方 ...
- Vue.js 源码分析(三) 基础篇 模板渲染 el、emplate、render属性详解
Vue有三个属性和模板有关,官网上是这样解释的: el ;提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标 template ;一个字符串模板作为 Vue 实例的标识使用.模板将会 ...
- Vue.js 源码分析(二) 基础篇 全局配置
Vue.config是一个对象,包含Vue的全局配置,可以在启动应用之前修改下列属性,如下: ptionMergeStrategies ;自定义合并策略的选项silent ...
- Vue.js 源码分析(十一) 基础篇 过滤器 filters属性详解
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...
- Vue.js 源码分析(十) 基础篇 ref属性详解
ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件实例,例如: ...
- Vue.js 源码分析(五) 基础篇 方法 methods属性详解
methods中定义了Vue实例的方法,官网是这样介绍的: 例如:: <!DOCTYPE html> <html lang="en"> <head&g ...
随机推荐
- 如何用charles进行https抓包
版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/138 如何用charles进行https抓包 晚上在家鼓捣 ...
- win10安装ubuntu系统出现的一些问题以及解决方案
前言 在win10系统进行安装新的ubuntu环境的时候遇到的一些问题,以及解决方案,供以后参考. 准备 从ubuntu官网下载最近版本的ubuntu系统,Ubuntu最新版本下载地址 操作系统:wi ...
- 动态链接库（Dynamic Link Library）
DLL INTRODUCTION A DLL is a library that contains code and data that can be used by more than one pr ...
- 博客美化——Silence主题皮肤
介绍 一款专注阅读的博客园主题,主要面向于经常混迹 博客园 的朋友.其追求大道至简的终极真理,界面追求简洁.运行追求高效.部署追求简单. 博客皮肤源码地址 预览地址 如何部署.使用皮肤 Silen ...
- 7.Python网络编程_多线程共享全局变量问题
Python多线程支持全局变量的共享操作,但是它存在很多问题,先来看以下程序,该程序理论上执行完毕后全局变量g_num的值应该是2000000,但是在实际运行中,结果不足理论值 import thre ...
- 201871010111-刘佳华《面向对象程序设计（java）》第十五周学习总结
201871010111-刘佳华<面向对象程序设计(java)>第十五周学习总结 实验十三 Swing图形界面组件(二) 实验时间 2019-12-6 第一部分:理论知识总结 5> ...
- LuaFramework 学习
LuaFramework_UGUI_V2 https://github.com/jarjin/LuaFramework_UGUI_V2 using UnityEngine; using LuaInte ...
- hex2pcap
#include <stdlib.h> #include <stdio.h> #include <string.h> typedef struct { unsign ...
- 用Java开发的【智能语音开发板MEGA ESP32AI】
有点激动 ~ ~ ~ 新鲜出炉,用视频看看效果哦 我们新研发出世的语音开发板MEGA ESP32AI,来看看吧,有点腻害哦!!!先演示下功能语音控制开关等.播报天气 戳下面链接看视频哦? MEGA E ...
- Java代码开发之《安全规约》
安全规约 1. [强制]隶属于用户个人的页面或者功能必须进行权限控制校验. 说明:防止没有做水平权限校验就可随意访问.修改.删除别人的数据,比如查看他人的私信内容.修改 他人的订单. 2. [ ...