Learn TypeScript 3 by Building Web Applications

Limitations

Vue's dependency injection constructs help decouple your components, but there are some drawbacks that you should be aware of. Some of them can be mitigated, but others cannot.

For starters, Vue's injection feature works by matching the provider key with the one that was requested when injecting. This means that if you use the same injection key for multiple providers in the ancestor's chain of a component, then you'll shadow providers who are higher in the hierarchy. In practice, the last writer wins (that is, the provider closest to the injection point will be used). This is a drawback because it could cause surprises. We will address this issue in the next section.

Another limitation to consider is that the provide and inject ...