Saiba mais sobre o Vue.js Watchers para melhorar o seu desenvolvimento de aplicações Web

Principais lições

Vue é uma estrutura JavaScript popular que oferece aos desenvolvedores vários benefícios importantes para a criação de aplicativos da Web. Estes incluem o seu suporte para arquitetura baseada em componentes, que permite código modular e reutilizável; o seu robusto sistema de gestão de estado, que ajuda a manter a consistência entre diferentes partes de uma aplicação; e as suas capacidades de encaminhamento incorporadas, permitindo uma navegação perfeita entre diferentes páginas ou vistas dentro do mesmo website. Ao tirar partido destas funcionalidades, os programadores podem simplificar os seus fluxos de trabalho e criar aplicações Web mais eficientes e escaláveis utilizando Vue.

Os observadores Vue funcionam como observadores de propriedades reactivas, permitindo a deteção de alterações e facilitando as respostas a eventos ou modificações de dados.

A utilização de propriedades computadas oferece uma alternativa mais sucinta e legível em comparação com a utilização de observadores para alcançar uma funcionalidade semelhante, o que acaba por conduzir a uma maior velocidade de execução e a processos de depuração simplificados.

As estruturas JavaScript evoluíram como um elemento indispensável no domínio do desenvolvimento Web, devido aos seus atributos de fácil utilização, como a conceção modular, a preservação do estado e a gestão da navegação. Consequentemente, estes componentes integrais contribuem significativamente para aliviar a carga, as despesas e a duração necessárias para construir uma aplicação Web de novo.

O Vue fornece uma série de funcionalidades que facilitam o desenvolvimento rápido de aplicações. Uma dessas funcionalidades é a função Watch, que permite aos programadores acompanhar as alterações nos valores de variáveis e expressões durante as operações em tempo de execução.

O que são Watchers no Vue?

Os watchers do Vue são funções que observam alterações em uma propriedade reativa e, posteriormente, fornecem uma resposta apropriada de acordo com essas modificações. Estes watchers permitem aos utilizadores responder a ocorrências e ajustes de dados, fornecendo um meio de monitorização atenta dentro da aplicação.

Para utilizar um Watcher no seu projeto Vue, deve primeiro importar a função “watch” do pacote Vue e incorporá-la no seu script.

 <script setup>
import { watch } from 'vue';
</script>

Utilizando a função watch fornecida, é possível incorporar efetivamente um “observador” no seu componente Vue. Uma ilustração rudimentar é a seguinte:

 <template>
  <div>
    <p>{{ user }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const user = ref('Chinedu');

const changeName = () => {
  user.value = 'Victor'; // Change the user's name
};

watch(user, (newUser, oldUser) => {
  alert(`User name changed from "${oldUser}" to "${newUser}"`);
});
</script>

Este elemento em particular emprega a funcionalidade Watcher para acompanhar as alterações na identidade de um utilizador. A área de marcação do bloco de código estabelece a estrutura HTML do componente, que inclui um elemento de parágrafo que exibe o valor do reactante chamado “user”.

O modelo incorpora um componente de botão que está associado a um ouvinte de eventos de clique e a uma função changeName . Após a modificação da entrada do utilizador, o Vue chama a função de retorno de chamada designada que, subsequentemente, apresenta uma mensagem pop-up indicando que o “nome de utilizador foi atualizado de ‘Chinedu’ para ‘Victor’.

Comparando Watchers com Propriedades Computadas

É crucial compreender a diferença entre watchers e propriedades computadas ao utilizá-los como mecanismos reativos dentro da estrutura do Vue. Embora ambos sirvam funções semelhantes em termos de atualização de ligações de dados com base em alterações, é essencial empregar cada um para a sua finalidade específica.

Uma ilustração deste conceito pode ser encontrada no cálculo das idades combinadas de um pai e de um filho utilizando um relógio de sol, como se segue:

 <template>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ total }}</p>
</template>

<script setup>
import { ref, watch } from 'vue';

const father = ref();
const son = ref();
const total = ref();

watch(son, (newAge, oldAge) => {
  total.value = Number(father.value) \\+ Number(newAge)
})

watch(father, (newAge, oldAge) => {
  total.value = Number(newAge) \\+ Number(son.value)
})

</script>

O componente Vue apresentado utiliza watchers para obter o agregado das idades do pai e do filho através da criação de uma nova variável reactiva designada por “total”. Este processo é executado utilizando a API de composição fornecida pelo Vue.

O código utiliza duas funções watch para monitorizar as idades do pai e do filho. Calculando a soma dessas idades e actualizando o valor da idade de uma pessoa com a da outra, obtém-se um total final para as idades combinadas. Este resultado é posteriormente armazenado no ficheiro

De forma semelhante, vamos examinar um exemplo que envolve propriedades computadas:javascriptconst person = {firstName: ‘John’,lastName: ‘Doe’,fullName() {return this.firstName \+ ’ ’ \+ this.lastName;}};console.log(person.fullName); // Saída: John Doe

 <template>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ total }}</p>
</template>

<script setup>
import { ref , computed } from 'vue';

const father = ref();
const son = ref();

const total = computed(() => {
  return Number(father.value) \\+ Number(son.value);
});

</script>

O código revisado apresenta uma abordagem mais sucinta e simplificada para ler as idades do pai e do filho, enquanto também aproveita uma propriedade computada para armazenar sua contagem combinada. Ao utilizar as poderosas capacidades de ligação de dados do Vue através de interpolações na secção do modelo, a informação pode ser apresentada sem problemas ao utilizador.

A utilização de propriedades computadas fornece um meio mais eficiente de determinar a soma de dois valores de idade em comparação com a dependência de observadores. A implementação de watchers neste contexto pode resultar num aumento dos tempos de carregamento e complicar o processo de depuração devido a uma base de código inerentemente mais complexa.

É aconselhável utilizar os observadores exclusivamente para observar e responder a modificações nos dados, em vez de os utilizar como alternativa às propriedades computadas, que são concebidas especificamente para obter informações adicionais a partir de dados reactivos actuais.

A opção Immediate disponível para Watchers no Vue

A opção “immediate”, que serve como uma escolha alternativa durante o processo de estabelecimento de um watcher, dita se a função de callback do watcher será ou não executada imediatamente após a montagem bem-sucedida do componente Vue associado.

Certamente, aqui está uma ilustração de um componente que utiliza uma função watcher com o atributo “immediate”:

 <script setup>
import { ref, watch } from 'vue';

const count = ref(10);

watch(
  count,
  (newCount, oldCount) => {
    console.log(`Count changed from ${oldCount} to ${newCount}`);
  },
  { immediate: true }
);
</script>

Após o início do ciclo de vida do componente acima mencionado, o observador deve executar prontamente a sua função de acompanhamento e registar “Contagem alterada de um estado indeterminado para dez” no registo do sistema. Esta ação indica que não foi atribuído qualquer valor à entidade preliminar antes de o Vue ter fornecido um valor de dez à referência do contador.

Em determinadas situações, a utilização da opção “imediato” pode ser vantajosa para a execução de uma operação inicial ou inicialização dependente do estado atual de um atributo monitorizado. A título de exemplo, se a sua aplicação necessitar de obter dados de uma API assim que montar um componente específico.

A opção profunda disponível no Vue Watchers

O recurso watcher do Vue oferece um nível profundo de observação para modificações dentro de objetos ou matrizes fechados, permitindo a deteção de alterações que ocorrem dentro de propriedades profundamente incorporadas. Esta capacidade é activada definindo o parâmetro correspondente como o seu equivalente afirmativo.

Eis uma ilustração de um componente Vue.js que utiliza a opção “deep”, que permite que os objectos aninhados sejam apresentados e editados numa estrutura semelhante a uma árvore dentro do campo de entrada:

 <script setup>
import { ref, watch } from 'vue';

const data = ref({ length: 42 });

watch(
  data,
  (newData, oldData) => {
    console.log(`Data changed"`);
  },
  { deep: true }
);

// This will trigger the watcher because it's a deep change
data.value.length = 43;
</script>

O segmento de código fornecido inicializa a referência de dados com um objeto que possui um atributo “length”. Em seguida, ativa a opção “deep” e verifica na consola que os dados foram actualizados, uma vez que o valor da propriedade “length” passou do seu estado original para trinta e três (33).

Ao inicializar uma variável de dados no Vue como um objeto reativo, ele é capaz de rastrear alterações em objetos profundamente aninhados sem utilizar a opção “deep”. Por outro lado, se a opção “deep” não estiver activada, a função de observação não conseguirá detetar as modificações efectuadas nesses objectos.

 <script setup>
import { ref, watch } from 'vue';

const data = reactive({ length: 42 });

watch(
  data,
  (newData, oldData) => {
    console.log(`Data changed"`);
  }
);

// This will trigger the watcher because it changes a reactive object
data.length = 43;
</script>

O código fornecido inclui uma função de observação que, ao detetar alterações no objeto reativo referido como “data”, regista uma mensagem na consola indicando que essas modificações ocorreram.

Crie melhores aplicações com Vue Watchers

Os watchers do Vue permitem um alto grau de comportamento reativo dentro de uma aplicação, permitindo a observação de modificações em atributos de dados específicos, acionando operações predeterminadas em conjunto com tais alterações.

Obter uma compreensão proficiente das circunstâncias apropriadas para empregar watchers, discernir suas dissimilaridades com propriedades computadas e familiarizar-se com escolhas como immediate e deep pode aumentar substancialmente a capacidade de construir aplicações Vue altamente reativas.