聊聊Vue中provide/inject的应用详解


Posted in Javascript onNovember 10, 2019

众所周知,在组件式开发中,最大的痛点就在于组件之间的通信。在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数据管理的 Vuex。

在这么多的组件通信方式中,provide/inject 显得十分阿卡林(毫无存在感)。但是,其实 provide/inject 也有它们的用武之地。今天,我们就来聊聊 Vue 中 provide/inject 的应用。

何为 provide/inject

provide/inject 是 Vue 在 2.2.0 版本新增的 API,官网介绍如下:

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。

官网的解释很让人疑惑,那我翻译下这几句话:

provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法,而在任何后代组件中,我们都可以使用 inject 来接收 provide 提供的数据或方法。

举个官网的?:

// 父级组件提供 'foo'
var Provider = {
 provide: {
  foo: 'bar'
 },
 // ...
}

// 子组件注入 'foo'
var Child = {
 inject: ['foo'],
 created () {
  console.log(this.foo) // => "bar"
 }
 // ...
}

可以看到,父组件提供的 foo 变量被子组件成功接收并使用。

了解了 provide/inject 是什么后,我们再来使用使用 provide/inject。

使用 provide/inject 做全局状态管理

在日常开发中,我们经常会使用 Vuex 做状态管理,但是,我个人一直不喜欢使用 Vuex,原因在于 Vuex 为了保持状态可被回溯追踪,使用起来太过繁琐;而我之前参与的项目,较少多人合作,这个功能对于我来说,意义不大,我仅仅只需要 Vuex 中提供全局状态的功能。

那么,有没有方便快捷的实现全局状态的方法呢?当然有,这就是 provide/inject 这个黑科技 API 的一种使用方法。

很多人也许会想到一种方式:在根组件中,传入变量,然后在后代组件中使用即可。

// 根组件提供一个非响应式变量给后代组件
export default {
 provide () {
  return {
   text: 'bar'
  }
 }
}

// 后代组件注入 'app'
<template>
 <div>{{this.text}}</div>
</template>
<script>
 export default {
  inject: ['text'],
  created() {
   this.text = 'baz' // 在模板中,依然显示 'bar'
  }
 }
</script>

这个想法,说对也对,说不对也不对,原因在于 provide 的特殊性。

在官网文档中关于 provide/inject 有这么一个提示:

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

也就是说,Vue 不会对 provide 中的变量进行响应式处理。所以,要想 inject 接受的变量是响应式的,provide 提供的变量本身就需要是响应式的。

由于组件内部的各种状态就是可响应的,所以我们直接在根组件中将组件本身注入 provide,此时,我们可以在后代组件中任意访问根组件中的所有状态,根组件就成为了全局状态的容器,仔细想想,是不是很像 React 中的 context 呢?

代码如下:

// 根组件提供将自身提供给后代组件
export default {
 provide () {
  return {
   app: this
  }
 },
 data () {
  return {
   text: 'bar'
  }
 }
}

// 后代组件注入 'app'
<template>
 <div>{{this.app.text}}</div>
</template>
<script>
 export default {
  inject: ['app'],
  created() {
   this.app.text = 'baz' // 在模板中,显示 'baz'
  }
 }
</script>

也许有的同学会问:使用 $root 依然能够取到根节点,那么我们何必使用 provide/inject 呢?

在实际开发中,一个项目常常有多人开发,每个人有可能需要不同的全局变量,如果所有人的全局变量都统一定义在根组件,

势必会引起变量冲突等问题。
使用 provide/inject 不同模块的入口组件传给各自的后代组件可以完美的解决该问题。

慎用 provide/inject

既然 provide/inject 如此好用,那么,为什么 Vue 官方还要推荐我们使用 Vuex,而不是用原生的 API 呢?

我在前面提到过,Vuex 和 provide/inject 最大的区别在于,Vuex 中的全局状态的每次修改是可以追踪回溯的,而 provide/inject 中变量的修改是无法控制的,换句话说,你不知道是哪个组件修改了这个全局状态。

Vue 的设计理念借鉴了 React 中的单向数据流原则(虽然有 sync 这种破坏单向数据流的家伙),而 provide/inject 明显破坏了单向数据流原则。试想,如果有多个后代组件同时依赖于一个祖先组件提供的状态,那么只要有一个组件修改了该状态,那么所有组件都会受到影响。这一方面增加了耦合度,另一方面,使得数据变化不可控。如果在多人协作开发中,这将成为一个噩梦。

在这里,我总结了两条条使用 provide/inject 做全局状态管理的原则:

  • 多人协作时,做好作用域隔离
  • 尽量使用一次性数据作为全局状态

看起来,使用 provide/inject 做全局状态管理好像很危险,那么有没有 provide/inject 更好的使用方式呢?当然有,那就是使用 provide/inject 编写组件。

使用 provide/inject 编写组件

使用 provide/inject 做组件开发,是 Vue 官方文档中提倡的一种做法。

以我比较熟悉的 elementUI 来举例:

在 elementUI 中有 Button(按钮)组件,当在 Form(表单)组件中使用时,它的尺寸会同时受到外层的 FormItem 组件以及更外层的 Form 组件中的 size 属性的影响。

如果是常规方案,我们可以通过 props 从 Form 开始,一层层往下传递属性值。看起来只需要传递传递两层即可,还可以接受。但是,Form 的下一层组件不一定是 FormItem,FormItem 的下一层组件不一定是 Button,它们之间还可以嵌套其他组件,也就是说,层级关系不确定。如果使用 props,我们写的组件会出现强耦合的情况。

provide/inject 可以完美的解决这个问题,只需要向后代注入组件本身(上下文),后代组件中可以无视层级任意访问祖先组件中的状态。

部分源码如下:

// Button 组件核心源码
export default {
  name: 'ElButton',
  // 通过 inject 获取 elForm 以及 elFormItem 这两个组件
  inject: {
    elForm: {
      default: ''
    },
    elFormItem: {
      default: ''
    }
  },
  // ...
  computed: {
    _elFormItemSize() {
      return (this.elFormItem || {}).elFormItemSize;
    },
    buttonSize() {
      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
    },
    //...
  },
  // ...
};

总结

其实在 Vue 的学习中,遵循着二八法则,我们常用的 20% 的 API 就能解决大部分日常问题,剩余的 API 感觉用处不大。但是,抽点时间去了解那些冷门的 API,也许你能发现一些不一般的风景,令你在解决一些问题时,事半功倍。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
lib.utf.js
Aug 21 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
详解javascript数组去重问题
Nov 06 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
js实现页面图片消除效果
Mar 24 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 #Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 #Javascript
webpack4 optimization使用总结
Nov 10 #Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 #Javascript
node后端服务保活的实现
Nov 10 #Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 #Javascript
vue父子组件的通信方法(实例详解)
Nov 10 #Javascript
You might like
simplehtmldom Doc api帮助文档
2012/03/26 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
JavaScript的目的分析
2007/01/05 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
JS回调函数深入理解
2019/10/16 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中使用PIPE操作Linux管道
2015/02/04 Python
python中字典(Dictionary)用法实例详解
2015/05/30 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
python 数据类型强制转换的总结
2021/01/25 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
2014年预算员工作总结
2014/12/05 职场文书
红旗渠导游词
2015/02/09 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
Python竟然能剪辑视频
2021/05/25 Python
什么是css原子化,有什么用?
2022/04/24 HTML / CSS