Vue composition api: Guia prático para alquimistas.

Bom dia, site.

Hoje venho compartilhar um pouco do conhecimento adquirido nas ultimas semanas estudando a nova api do vue, a VUE COMPOSITION API.

Sumário:

1. Introdução: Boas vindas, jovem mago;
2. Setup(): O cérebro do componente;
2.1 JSX;
2.2 Capturando Props;
2.3 Context;
3. Reatividade: A lei da Alquimia;
3.1 Reactive;
3.2 Ref;
3.3 Reactive ou ref?;
4. Computed: O watch que observa diferente;
5. ReadOnly: Simple;
6. Watch: O olhar sanguinário do vigia;
7. Ciclos de vida;

Introdução, O problema dos mixins.

Boas vindas, jovem mago.

Primeiramente deve-se entender o processo que ocasionou o desenvolvimento da composition api. Apesar das inúmeras features da segunda versão do vue, o mesmo ainda possuía uma defasagem problemática em relação ao encapsulamento de código de forma performática utilizando mixins.

É provável que o instanciamento de dois ou mais mixins não possam ser utilizados de forma isócrona, por exemplo, se ambos mixins utilizam o método foo(), o método será interrompido pois o método remanescente irá sobrescrever o precedentemente.

Harmonizar centenas de funções em projetos que dependem de ser altamente escaláveis pode ser um grande problema, pois você deve refatorar o mixin e depois realizar o mesmo processo em todos os componentes que implementam o mesmo.

Esse é apenas um dos nêmesis que o composition api foi forjado para resolver, veremos mais nos próximos tópicos desse artigo.

Setup(): O cérebro do componente.

Considere o método setup como o cérebro do componente, pois é a partir do mesmo que iremos definir os demais métodos e instanciaremos nossas variáveis, não ficou muito claro ainda, não é mesmo? Sem problemas, veja a imagem abaixo:

Considerando o tempo de execução da aplicação, o método setup() se encontra no ciclo beforeCreate().

Observe que o objeto mage não é reativo, veremos mais sobre reatividade no próximo capitulo.

Acessando as props de um componente.

Podemos acessar as propriedades de um componente através do primeiro parâmetro de do método setup:

Não force a desestruturação das propriedades pois você perderá a reatividade e receberá um erro no console e seu componente não será montado.

Para encerrar esse capítulo precisamos falar um pouco sobre o context, que é o segundo parâmetro recebido por setup(), em suma, o context obtêm todo objeto de instancia previamente exibida pelo this da segunda versão do vue.

retorno fornecido pelo context:

attrs: (...)
emit: (...)
expose: exposed => {…}
props: (...)
slots: (...)

Uma vez que setup() é chamado antes do contexto, o this como conhecemos não está disponível!

Reatividade: A lei da Alquimia.

Considero essa a mudança mais considerável para a versão antecedente do vue, outrora, utilizávamos a propriedade data como mecanismo de definição de valores reativos.

Existem algumas formas de transformar uma variável comum, em uma variável reativa:

Utilizando reactive , pegamos um objeto e retornamos um proxy reativo do original.

import { reactive } from 'vue'
  export default {
    setup() {
      const mage = reactive({
        type: 'fire',
        strong: 8
      })

      const changeTypeOfMage = () => mage.type = 'water'

      return {
        mage,
        changeTypeOfMage
      }
    }
  }

Nota-se que retornamos o método que muda o type do nosso objeto mage, uma vez que o método será utilizado dentro do jsx, como observamos nos capítulos anteriores.

Se você deseja transformar um tipo de dado primitivo em uma propriedade reativa, utilize o hook ref.

import { ref } from 'vue'
  export default {
    setup() {
      let isMage = ref(true)
      const notMage = () => isMage.value = !isMage.value;
      return {
        isMage,
        notMage
      }
    }
  }

Quando usar reactive e quando usar ref?

Vamos para lei da alquimia geral, tenha pretensão de usar ref para tipos primitivos, como: String, Number, BigInt, Boolean, Symbol, Null e Undefined. Para objetos onde a teremos uma deep reactive, utilize reactive.

Computed: O watch que observa diferente.

Assim como o computed da versão anterior, pense em uma variável que retorna uma função, a diferença dessa vez é que o computed do vue composition api retorna 2 métodos: o get() que retorna uma função com o dado imutável e não reativo, e o método set(), que consegue mutar essa regra e mudar os valores contidos no retorno do computed;

<template>
  <p>Name: {{mage.name}}</p>
  <p>Type: {{mage.type}}</p>
  <p>Strong: {{mage.strong}}</p>
  <p>Status: {{status}}</p>
  <button @click="enchant">enchant armor</button>
  <button @click="disenchant">disenchant armor</button>
</template>

<script>
<template>
  <p>Name: {{mage.name}}</p>
  <p>Type: {{mage.type}}</p>
  <p>Strong: {{mage.strong}}</p>
  <p>Status: {{status}}</p>
  <button @click="enchant">enchant armor</button>
  <button @click="poison">poison armor</button>
</template>

<script>
import { computed, reactive } from "vue";
export default {
  setup() {
    const mage = reactive({
      type: 'fire',
      strong: 4,
      name: 'Black Mage',
    })

    const status = computed({
      get: () => mage.strong > 7 ? 'stronger' : 'weak',
      set: (value) => mage.type = value
    })

    const enchant = () => mage.strong = mage.strong + 4
    const poison = () => {
      mage.strong = mage.strong - 4;
      status.value = 'poisoned'
    }

    return { mage, status, enchant, poison }
  },
};
</script>

Observe o caso acima, declaramos um objeto inferindo que ele seja uma mago e que possua tais atributos, o computed está ali para observar o nível de força de nosso mago e mudar seu status caso ele se torne fraco ou forte, para pegar esse detalhe utilizamos seu método get() como explicado acima, porem por default o status se torna imutável e não reativo, para isso utilizamos o set() definido no computed para atribuir um novo status ao nosso mago. Ainda ficou com alguma dúvida? copie e execute o código, verá que na prática irá fazer mais sentido!

Readonly: Literalmente isso.

O hook readonly pega um objeto (reativo ou simples) ou um ref e retorna um proxy somente leitura para o original. Um proxy somente leitura: qualquer propriedade aninhada acessada também será somente leitura.

Readonly: Watch: O olhar sanguinário do vigia.

O watchEffect é uma novidade também, porem com grandes poderes vem grandes responsabilidades, a utilização watcheffect pode ter N aplicação uma vez que ela se transforma qualquer dado inferido no setup como um dado observável.

Considere o código construído no exemplo do computed, caso você queira observar a mudança constante do nível de força de nosso mago você adicionaria o código abaixo:

watchEffect(() => console.log(mage.strong));

Comumente ao ciclo de vida do componente, o watchEffect é desfeito toda vez que nosso componente morre.

Ciclos de vida.

Apesar da mudança de alguns nomes, grande parte dos hooks ainda possuem suas respectivas funções, exceto o setup() e dois novos hooks: onRenderTracked e onRenderTriggered.

Antigo	Novo
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
activated	onActivated
deactivated	onDeactivated
errorCaptured	onErrorCaptured

-Como utilizar os hooks?

const Mage = {
  setup() {
    onMounted(() => {
      console.log('Drop!')
    })
    onUpdated(() => {
      console.log('New Level!')
    })
    onUnmounted(() => {
      console.log('Dead!')
    })
  }
}

Em minha concepção essa são as mudanças fundamentais realizadas na nova versão do vue, em breve postarei a parte 2 e nela irei explicar um pouco sobre injeção de dependência, vue3 com typescript, unity testes e alguns tips de reatividade.

Obrigado por ler até aqui, o objetivo desse post é deixar a sintaxe e esclarecer alguns pontos sobre o vue composition api, não deixe de entrar em contato ou escrever um comentário caso eu tenha errado em algum momento.

PARTE 2: undefined