vue的provide和inject

vue官网上有提到这两个api是类似于react的context上下文，但是默认情况下是不支持响应式的，如果要支持响应式需要传入响应式对象或者数组。
这个api的主要作用可以看成是vuex的精简版共享父组件的state

父组件provide

export default {
  data() {
    return {
      testAppProvide: {name: 10},
      testAppProvide1: [1, 2, 3, 4]
    };
  },
  provide() {
    return {
      appProvide: this.testAppProvide,
      appProvide1: this.testAppProvide1,
      setAppProvide: () => this.testAppProvide.name = 101,
      setAppProvide1: () => this.$set(this.testAppProvide1, 0, 101)
    };
  },
}

子组件inject

<template>
  <div>
    appProvide: <span @click="setAppProvide">{{appProvide.name}}</span>
    appProvide1: <span @click="setAppProvide1">{{appProvide1[0]}}</span>
  </div>
</template>

export default {

    inject: ['appProvide', 'appProvide1' ,'setAppProvide', 'setAppProvide1'],
    mounted: () {
        console.log(this.appProvide)
    }
}

要注意的是如果appProvide是字符串而不是object或者Array的话那么将不能进行响应式更新