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

站长资源 2024/11/26 佚名

2 0 1

用法

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

先来看看官网的介绍:

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

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="/UploadFiles/2021-04-02/vue.js">

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

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




<!DOCTYPE html> 　　<!--例2-->　　　　
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="/UploadFiles/2021-04-02/vue.js">

输出: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)
    "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' "htmlcode">

function initProvide (vm) {   //第3619行
 var provide = vm.$options.provide;        //尝试获取provide
 if (provide) {                  //如果provide存在,当它是函数时执行该返回，否则直接将provide保存到Vue实例的_provided属性上
  vm._provided = typeof provide === 'function' 
   "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
   "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'
      "Injection \"" + key + "\" not found"), vm);
    }
   }
  }
  return result                            //返回结果，比如:{foo: "bar"}
 }
}


注:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。


总结
以上所述是小编给大家介绍的Vue 2.0 中依赖注入 provide/inject组合实战,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

                                
                                
                                    Vue,2.0,依赖注入,provide和inject

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“Vue 2.0 中依赖注入 provide/inject组合实战”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

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

Vue监听页面刷新和关闭功能

js实现页面多个日期时间倒计时效果

评论“Vue 2.0 中依赖注入 provide/inject组合实战”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接