vue新特性provide/inject深入学习

阅读本文帮你你可以在使用provide/inject传递响应式数据时记住一个特性: provide传递的每一个响应式数据都需要值是一个引用不变的可监听对象。

在开发vue项目时，不可避免的需要进行组件之间的相互通信。如果是在一个实际的业务项目中， 组件间的通信可以采用采用像vuex, EventBus等机制实现跨组件通信。但如果在开发基础组件库时，需要跟业务项目外部环境(vuex，EventBus)解耦，不可以使用这些机制。一般的解决方案是模仿事件冒泡和广播来实现在基础库中组合组件的通信，比如element-ui的emitter。

在vue的2.2.0版本中， 添加了provide/injectapi， 该api参照实现了react的context的功能。也为跨组件通信提供了一种新的方式。

从官网文档介绍来看， 这是一种比emitter优雅的多的机制， 但是有一个特殊的提示.

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

意味着provide/inject机制对响应式传递有很大的限制， 那它是否可以完全替换掉emitter机制呢？

但在实际开发中， 组合父子组件都是配套使用，在实现时一般不会使用事件冒泡或者事件广播的方式进行通信， 一般通过递归或者循环获取$parent的方式的得到祖先组件的数据， 因为这些数据是可响应的，不需要事件传递那么繁琐。如在子组件中有代码:

computed: {

    count() {

      return (this.$parent || {}).count;

    },

    user() {

      return (this.$parent || {}).user;

    },

  },

当父组件的count(基本类型)或者user(引用类型)发生改变时， 会自动更新子组件的computed。