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.