Vue 2.0 中依赖注入 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的传值差不多，我们在中间再嵌套一层组件就知道他的用处了，例如:
<!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/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"}},如下:
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!"}，如下
e]
组件实例化时
_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 2.0 中依赖注入 provide/inject组合实战,希望对大家有所帮助
下一篇： PS绘制逼真的大型山水场景