Vue 2.0 中依赖注入 provide/inject组合实战

前端  /  管理员 发布于 5年前   557

用法

--------------------------------------------------------------------------------

先来看看官网的介绍:

简单的说，当组件的引入层次过多，我们的子孙组件想要获取祖先组件得资源，那么怎么办呢，总不能一直取父级往上吧，而且这样代码结构容易混乱。这个就是这对选项要干的事情

provide和inject需要配合使用，它们的含义如下:

provide        ;一个对象或返回一个对象的函数，该对象包含可注入起子孙的属性，可以使用ES6的Symbols作为key(只有原生支持Symbol才可以)
inject        　;一个字符串数组或一个对象
             　　　　;字符串数组    ;provide对象里哪些属性可用
　　　　            ;一个对象        ;key是本地的绑定名，value是provide里对应的对象名，也可以是一个对象，此时from属性是provide里对应的对象名，default属性是不存在时的默认值

来个实例就明显了:

输出:Hello Vue!,对应的DOM节点渲染为:

是不是感觉和props的传值差不多，我们在中间再嵌套一层组件就知道他的用处了，例如:

输出: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组合实战,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

• vue中的provide/inject的学习使用
• 详解Vue 多级组件透传新方法provide/inject
• 详解Vue实战指南之依赖注入(provide/inject)
• Vue.js中provide/inject实现响应式数据更新的方法示例
• vue中使用[provide/inject]实现页面reload的方法
• 聊聊Vue中provide/inject的应用详解
• vue父组件给子组件的组件传值provide inject的方法
• 浅析vue中的provide / inject 有什么用处
• Vue组件通信入门之Provide和Inject机制