想要使用 provide/inject 实现祖先组件传递一些公共数据到子孙组件中，但是官方文档说了，provide 默认不支持响应式数据，如果需要响应式，可以传递一个引用对象数据。

{
    data(){
        return {
            config: {
                variable: 'this is reactive'
            },
            data: 'this is not reactive'
        }
    },
    provide: {
        config: this.config,
        config2: {
            veriable: this.data
        }
    }
}

{
    data(){
        return {
            config: {
                variable: 'this is reactive'
            },
            data: 'this is not reactive'
        }
    },
    provide: {
        config: this.config,
        config2: {
            veriable: this.data
        }
    }
}

虽然都是传了对象给 provide，但是只有config是可以响应式的，config2不具有响应式。在父组件修改this.data，子孙组件不会有响应式的改变。

与此同时，在父组件中修改this.config后，子孙组件inject的config将失去响应式。

根据上面的尝试，最终还是没有使用 provide/inject 传递数据的方案。因为有些数据虽然是要层层传递到子孙组件，实现共享，但是也有需要响应式的场景，这个时候，使用 provide 无法防止父组件意外地对其重新赋值，没有什么能够保证 provide 的响应式对象不被修改。所以最后还是交给了 vuex 来进行数据管理。

如果什么数据都往 vuex 里面放，会发现 vuex 变得臃肿，难以维护，因此provide/injectapi 还是有价值的。

在 Vue3 里面，他们可以传递响应式数据了，在 Vue3 中感觉可以得到更好的发挥。

需要 provide 响应式不是想在子孙组件里面修改它的值，而是想在父组件中修改，让子孙组件得到修改后的值。因为不建议在一个组件中的变量被其他组件给直接修改，只有会不利于维护。