Utilizando watchers para reagir a alterações específicas

Olá, alunos! Bem-vindos à aula 2 de Observadores em Vue.js. Hoje, vamos aprender como utilizar watchers para reagir a alterações específicas.

Como reagir a alterações específicas?

Por padrão, observadores reagem a todas as alterações de uma propriedade.

No entanto, você pode usar o parâmetro deep para reagir a alterações específicas.

A sintaxe para reagir a alterações específicas é a seguinte:

watch(propriedade, callback, { deep: true }) {
  // código para reagir à alteração
}

Onde:

• propriedade é a propriedade que você deseja observar.
• callback é a função que será executada quando a propriedade for alterada.
• deep é um parâmetro opcional que especifica se as alterações devem ser rastreadas recursivamente.

Por exemplo, vamos considerar o seguinte componente:

<template>
  <div>
    <input type="text" v-model="texto">
    <p>{{ texto }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      texto: '',
    };
  },
};
</script>

Neste componente, a propriedade texto é observada.

Quando o usuário alterar o texto, o observador será executado e a interface do usuário será atualizada.

Agora, vamos adicionar o parâmetro deep ao observador:

watch('texto', function(oldValue, newValue) {
  // Atualiza a interface do usuário com o novo valor do texto
}, { deep: true });

Com o parâmetro deep definido como true, o observador também será executado quando o usuário alterar a propriedade texto de um objeto aninhado.

Exemplos de uso de observadores para reagir a alterações específicas

Aqui estão alguns exemplos de como usar observadores para reagir a alterações específicas:

• Reagir a alterações de um array:

watch('array', function(oldValue, newValue) {
  // código para reagir à alteração
}, { deep: true });

• Reagir a alterações de um objeto:

watch('objeto', function(oldValue, newValue) {
  // código para reagir à alteração
}, { deep: true });

• Reagir a alterações de uma propriedade específica de um array ou objeto:

watch('array.nome', function(oldValue, newValue) {
  // código para reagir à alteração
}, { deep: true });

Desafio

Aqui está um desafio para você:

• Crie um componente que exiba uma lista de itens. Use um observador para atualizar a lista quando o usuário adicionar um novo item.

Boa sorte!

Dica

Você pode usar o seguinte código como ponto de partida:

<template>
  <div>
    <ul>
      <li v-for="item in itens">{{ item }}</li>
    </ul>
    <input type="text" v-model="novoItem">
    <button @click="adicionarItem()">Adicionar item</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itens: [],
    };
  },
  methods: {
    adicionarItem() {
      this.itens.push(this.novoItem);
    },
  },
};
</script>

No próximo tópico, aprenderemos sobre templates em Vue.js. Templates são a maneira de definir a estrutura e o conteúdo de um componente Vue.js.