Alô, gente! Seguindo nos 100 dias de Vue, hoje vamos falar um pouco sobre o Watch, uma função que já fazia parte do Vue 2, e do watchEffect, uma nova funcionalidade introduzida no Vue 3.

Watchers

Da mesma forma que as Computed Properties de ontem, o Watch já fazia parte do Vue 2 e sua utilização mudou muito pouco no Vue 3. Mas para quem não está familiarizado com o conceito, vou explicar qual sua utilidade.

• O Vue sempre facilita muito a nossa vida dando nomes bem declarativos para as funcionalidades que possui, no caso do Watch não é diferente. Watch (observar, em inglês) serve para quando precisamos observar alguma mudança nos nossos dados dentro do app.
• Essa função não é tão utilizada normalmente, mas é muito útil pra quando tu precisa realizar alguma ação assim que algum dado mudar. Um bom exemplo é quando precisamos saber o tamanho da janela que estamos usando para mudar o background da nossa aplicação, ou então mudar de um menu desktop para o menu mobile.
• Diferentemente das Computed Properties, os Watchers podem realizar operações assíncronas
• Para utilizar o Watch, devemos primeiramente importá-lo do Vue. O watch não necessariamente precisa ser atribuído a uma variável, somente no caso de você querer que eventualmente ele pare de observar o dado. O ele recebe como primeiro argumento o nome da propriedade que você quer observar, e como segundo argumento a função callback que vai ser executada quando ocorrer alguma mudança. Dentro dessa função, podemos receber o valor antigo da propriedade que estamos observando e seu novo valor. Abaixo um exemplo para melhor visualizar:

Quando clicamos no botão e o valor da variável nome é alterado, a função Watch é disparada e podemos visualizar os seus valores.

watchEffect

Bom, agora que já compreendemos melhor como funciona o Watch (assim espero, pelo menos), fica muito mais fácil de entendermos o que o watchEffect faz.

• O use watchEffect é um novo meio de observarmos as mudanças nas nossas variáveis que foi introduzida no Vue 3.
• Do mesmo jeito que o ref e reactive que vimos no dia #01, cada um tem sua utilidade e podem ser utilizadas em situações diferentes.
• Diferentemente do Watch, no watchEffect nós não precisamos passar o nome da propriedade que desejamos observar como primeiro argumento, basta utilizar a variável que desejamos observar dentro do watchEffect, assim que alguma das dependências da função for alterada, ele vai automaticamente ser disparado. Dessa forma, com um só watcher podemos observar várias variáveis diferentes.
• Uma outra mudança, é que ele é executado uma vez assim que a página carrega.

Como podemos observar, a função foi executada a primeira vez quando a página carregou e uma segunda quando uma das dependências dela (name.value) foi alterada.

Finalizando

Apesar de muito úteis, os watchers não são tão utilizados no dia-a-dia de um desenvolvedor Vue quanto as Computed Properties. Mas existem momentos em que somente as computed properties não bastam para reagirmos a algum mudança no nosso aplicativo, nesses momentos (principalmente quando precisamos realizar operações custosas ou assíncronas) os watchers podem ser a ferramenta que precisamos.