Introdução
A injeção de dependência é um ótimo padrão para usar ao construir aplicativos grandes e complexos. O principal desafio de construir esses aplicativos é criar componentes fracamente acoplados, e é aqui que o gerenciamento de dependência é mais crítico.
Este artigo apresentará a injeção de dependência, seus prós e contras e como a injeção de dependência pode ser tratada em Projetos Vue.
O que é injeção de dependência?
A injeção de dependência é um padrão de design no qual as classes não têm permissão para criar dependências. Em vez disso, eles solicitam dependências de fontes externas. Este padrão de design sustenta fortemente que uma classe não deve configurar suas dependências estaticamente.
Por que injeção de dependência?
Por que devemos usar injeção de dependência no Vue quando podemos passar dados de componentes pai para baixo para os componentes filhos?
Alguma experiência com o uso de adereços o exporia ao termo perfuração de suporte, que é o processo em que os adereços são passados de uma parte da árvore de componentes para outra passando por outras partes que não precisa dos dados, mas apenas ajuda a passá-los pela árvore:
RexComponent (Alguém precisa do meu endereço de carteira?) ├── TomComponent ├── PeterComponent ├── DurryComponent (sim, eu preciso)
Com No trecho acima, vamos considerar um cenário onde RexComponent tem um endereço de carteira para distribuir e DurryComponent é o único que precisa do endereço de carteira. Teremos que passar o endereço da carteira de RexComponent para TomComponent para PeterComponent e, finalmente, para DurryComponent. Isso resulta na parte redundante do código em TomComponent e PeterComponent.
Com a injeção de dependência, DurryComponent receberia a carteira de RexComponent sem passar por TomComponent e PeterComponent.
Para lidar com a injeção de dependência. no Vue, as opções de fornecer e injetar são fornecidas imediatamente.
As dependências a serem injetadas são disponibilizadas pelo componente pai usando a propriedade fornecer da seguinte maneira:
//Componente pai
A dependência fornecida é injetada no componente filho usando a propriedade injetada:
Meu nome é {{name}}
O vue-property-decorator também expõe o decorador @Provide para declarar provedores.
Usando o decorador @Provide, podemos disponibilizar dependências no componente pai:
//Classe padrão de exportação do componente pai ParentComponent extends Vue {@Provide (“user-details”) userDetails: {name: string}={name:”Paul”}; }
Da mesma forma, as dependências podem ser injetadas no componente filho:
//Componente filho
Hierarquia do provedor
A regra da hierarquia do provedor afirma que se a mesma chave do provedor for usada em vários provedores na árvore de dependência de um componente, então o provedor do pai mais próximo do o componente filho substituirá outros provedores superiores na hierarquia.
Vamos considerar o seguinte trecho para facilitar o entendimento:
FatherComponent ├── SonComponent ├── GrandsonComponent//Componente pai
No snippet acima, a família a dependência-name é fornecida pelo FatherComponent:
//componente Son
No snippet acima, o SonComponent substitui a dependência do nome de família fornecida anteriormente pelo Componente Pai:
//Grand son Component
Nosso sobrenome é {{familyName}}
Como você pode imaginar, De Royals será renderizado no modelo do GrandsonComponent.
Em alguns projetos complexos do Vue, você pode evitar a substituição de dependências para obter consistência na base de código. Nessas situações, substituir dependências é visto como uma limitação.
Felizmente, o JavaScript nos forneceu o símbolos ES6 como uma solução para a desvantagem associada a vários provedores com as mesmas chaves.
De acordo com MDN ,“ Os símbolos são frequentemente usados para adicionar chaves de propriedade exclusivas a um objeto que não colidirá com chaves que qualquer outro código poderia adicionar ao objeto, e que estão ocultos de quaisquer mecanismos que outro código irá normalmente usar para acessar o objeto. ”
Em outras palavras, cada símbolo tem uma identidade única:
Símbolo (‘foo’)===Symbol (‘foo’)//false
Em vez de usar a mesma chave de string nos lados do provedor e da injeção como fizemos em nosso código anterior, podemos usar o símbolo ES6. Isso garantirá que nenhuma dependência seja substituída por outra:
export const FAMILY={FAMILY_NAME: Symbol (‘FAMILYNAME’),};
Vantagens da injeção de dependência
Melhora a capacidade de reutilização do código Facilita o teste de unidade de aplicativos por meio de simulações/stubbing de dependências injetadas. configuração de aplicativos
Advertências para injeção de dependência
A injeção de dependência no Vue não suporta injeção de construtor. Esta é uma grande desvantagem para desenvolvedores que usam componentes baseados em classe porque o construtor não inicializará as propriedades da classe do componente. Muitos erros de tempo de compilação são colocados em tempo de execução. Com a injeção de dependência do Vue, a refatoração de código pode ser muito tediosa. A injeção de dependência do Vue não é reativa
Conclusão
Neste artigo, estabelecemos um entendimento básico da injeção de dependência no Vue. Vimos as desvantagens associadas a vários provedores com as mesmas chaves, enquanto também implementamos uma solução para a desvantagem usando os símbolos ES6.
