vue中provide和inject的坑（Vue中 provide、inject 详解及使用）

传送门：Vue中 子组件向父组件传值 及 .sync 修饰符 详解

传送门：Vue中 状态管理器（vuex）详解及应用场景

传送门：Vue中 $ attrs                、$ listeners 详解及使用

传送门：Vue中 事件总线（eventBus）详解及使用

传送门：Vue 2.x 官方文档 provide / inject 说明 Vue中 常见的组件通信方式可分为三类 父子通信 父向子传递数据是通过 props
  
  
  
  
  
  
  
  ，子向父是通过 events（$emit）； 通过父链 / 子链也可以通信（$parent / $children）； ref 也可以访问组件实例； provide / inject； $attrs/$listeners； 兄弟通信 Bus； Vuex； 跨级通信 Bus； Vuex； provide / inject
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 、 $attrs / $listeners















、

1. provide / inject 简介

类型

provide：Object | () => Object inject： Array<string> | { [key: string]: string | Symbol | Object }

详细

这对选项需要一起使用  
  
  
  
  
  
  
  
，以允许一个祖先组件向其所有子孙后代注入一个依赖
 


 


 


 


 


 


 


 

，不论组件层次有多深
 
 
 
 
 
 
 
 ，并在其上下游关系成立的时间里始终生效                。 如果你熟悉 React   
   
   
   
   
   
   
   
，这与 React 的上下文特性很相似
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 。 provide 选项应该是一个对象或返回一个对象的函数















。该对象包含可注入其子孙的 property 
  
  
  
  
  
  
  
 。 在该对象中可使用 ES2015 Symbols 作为 key
 

 

 

 

 

 

 

 
，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作
  
  
  
  
  
  
  
  。 inject 选项应该是： 一个字符串数组

 

 

 

 

 

 

 

 ，或 一个对象                ，对象的 key 是本地的绑定名
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，value 是： 在可用的注入内容中搜索用的 key (字符串或 Symbol)















，或 一个对象                        ，该对象的： from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol) default property 是降级情况下使用的 value

2. provide / inject 使用方法

祖组件

<template> <div> <button @click="changeMsg">祖组件触发</button> <h1>祖组件</h1> <parent></parent> </div> </template> <script> import parent from ./parent.vue; export default { data(){ return{ obj:{ name:JavaScript, }, developer:布兰登·艾奇, year:1995, update:2021年06月, } }, provide(){ return { obj: this.obj, // 方式1.传入一个可监听的对象 developerFn:() => this.developer, // 方式2.通过 computed 来计算注入的值 year: this.year, // 方式3.直接传值 app: this, // 4. 提供祖先组件的实例 缺点：实例上挂载很多没有必要的东西 比如：props 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，methods
 


 


 


 


 


 


 


 

。 } }, components: { parent, }, methods:{ changeMsg(){ this.obj.name = Vue; this.developer = 尤雨溪; this.year = 2014; this.update = 2021年6月7日; }, }, } </script>

父组件

<template> <div class="wrap"> <h4>子组件（只做中转）</h4> <child></child> </div> </template> <script> import child from ./child.vue; export default { components:{ child, }, } </script>

孙组件

<template> <div> <h5>孙组件</h5> <span>名称：{{obj.name}}</span> | <span>作者：{{developer}}</span> | <span>诞生于：{{year}}</span> | <span>最后更新于：{{this.app.update}}</span> </div> </template> <script> export default { computed:{ developer(){ return this.developerFn() } }, inject:[obj,developerFn,year,app], } </script>

未点击按钮























，原有状态

当点击按钮触发 changeMsg 方法后                ，效果如下：

对比一下前后差异：无论点击多少次  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
，孙组件中的诞生于 year 字段永远都是1995 并不会发生变化















，通过 方式1 
  
  
  
  
  
  
  
 、方式2
  
  
  
  
  
  
  
  、方式4传值是可以响应的 
 
 
 
 
 
 
 
。

正是官网所提到的：provide 和 inject 绑定并不是可响应的
   
   
   
   
   
   
   
   。这是刻意为之的
 

 

 

 

 

 

 

 
。然而
  
  
  
  
  
  
  
  ，如果你传入了一个可监听的对象  
  
  
  
  
  
  
  
，那么其对象的 property 还是可响应的 

 

 

 

 

 

 

 

。

在孙组件中修改祖组件传递过来的值（方式1
 


 


 


 


 


 


 


 

、方式4）
 


 


 


 


 


 


 


 

，发现对应的祖组件中的值也发生了变化                。

祖组件

<template> <div> <h1>祖组件</h1> <span>名称：{{obj.name}}</span> | <span>最后更新于：{{update}}</span> <parent></parent> </div> </template> <script> import parent from ./parent.vue; export default { data(){ return{ obj:{ name:JavaScript, }, update:2021年06月, } }, provide(){ return { obj: this.obj, app: this, } }, components: { parent, }, } </script>

父组件不变

孙组件

<template> <div> <button @click="changeMsg">孙组件触发</button> <h3>孙组件</h3> <span>名称：{{obj.name}}</span> | <span>最后更新于：{{this.app.update}}</span> </div> </template> <script> export default { inject:[obj,app], methods: { changeMsg(){ this.obj.name = React; this.app.update = 2020年10月; } }, } </script>

未点击按钮
 
 
 
 
 
 
 
 ，原有状态

当点击按钮触发 changeMsg 方法后   
   
   
   
   
   
   
   
，效果如下：

3. 总结

慎用 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 可以完美的解决这个问题
 
 
 
 
 
 
 
 ，只需要向后代注入组件本身（上下文）   
   
   
   
   
   
   
   
，后代组件中可以无视层级任意访问祖先组件中的状态
 

 

 

 

 

 

 

 
。

部分源码如下：

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; }, //... }, // ... };