# Métodos de Instância

# $watch

Argumentos:
- {string | Function} source
- {Function | Object} callback
- {Object} options (optional)
  - {boolean} deep
  - {boolean} immediate
  - {string} flush
Retorno: {Function} unwatch
Uso:

Observa uma propriedade reativa ou uma função computada na instância do componente esperando alterações. O callback é chamado com o novo valor e o valor antigo para a propriedade fornecida. Só podemos passar o nome da propriedade data, props ou computed de nível superior como uma string. Para expressões mais complexas ou propriedades aninhadas, use uma função.

Exemplo:

const app = createApp({
  data() {
    return {
      a: 1,
      b: 2,
      c: {
        d: 3,
        e: 4
      }
    }
  },
  created() {
    // nome da propriedade de nível superior
    this.$watch('a', (newVal, oldVal) => {
      // faça algo
    })

    // função para observar uma única propriedade aninhada
    this.$watch(
      () => this.c.d,
      (newVal, oldVal) => {
        // faça algo
      }
    )

    // função para observar uma expressão complexa
    this.$watch(
      // toda vez que a expressão `this.a + this.b` produz um resultado diferente,
      // o manipulador será chamado. É como se estivéssemos observando
      // um dado computado sem precisarmos definí-lo
      () => this.a + this.b,
      (newVal, oldVal) => {
        // faça algo
      }
    )
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

Quando o valor observado é um objeto ou array, quaisquer alterações em suas propriedades ou elementos não acionarão o inspetor porque fazem referência ao mesmo objeto/array:

const app = createApp({
  data() {
    return {
      article: {
        text: 'Vue é incrível!'
      },
      comments: ['De fato!', 'Concordo']
    }
  },
  created() {
    this.$watch('article', () => {
      console.log('Artigo alterado!')
    })

    this.$watch('comments', () => {
      console.log('Comentários alterados!')
    })
  },
  methods: {
    // Esses métodos não acionarão um observador pois alteramos apenas uma propriedade do object/array,
    // não o objeto/array em si
    changeArticleText() {
      this.article.text = 'Vue 3 é incrível'
    },
    addComment() {
      this.comments.push('Novo comentário')
    },

    // Esses métodos acionarão um observador pois substituímos o objeto/array completamente
    changeWholeArticle() {
      this.article = { text: 'Vue 3 é incrível' }
    },
    clearComments() {
      this.comments = []
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

$watch retorna uma função unwatch que para de disparar o callback:

const app = createApp({
  data() {
    return {
      a: 1
    }
  }
})

const vm = app.mount('#app')

const unwatch = vm.$watch('a', cb)
// depois, desmonta o observador
unwatch()

1
2
3
4
5
6
7
8
9
10
11
12
13

Opção: deep

Para também detectar mudanças de valores aninhados dentro de Objects, você precisa passar deep: true no argumento de opções. Esta opção também pode ser usada para observar mutações de array.

Nota: ao mudar (ao invés de substituir) um Object ou um Array e observar com a opção deep, o valor antigo será o mesmo que o novo valor porque eles fazem referência ao mesmo Object/Array. O Vue não mantém uma cópia do valor pré-modificação.
```
vm.$watch('someObject', callback, {
  deep: true
})
vm.someObject.nestedValue = 123
// callback é acionado
```
1
2
3
4
5

Opção: immediate

Passar immediate: true na opção acionará o callback imediatamente com o valor atual da expressão:

vm.$watch('a', callback, {
  immediate: true
})
// `callback` é acionado imediatamente com o valor atual de `a`

1
2
3
4

Observe que com a opção immediate você não poderá dar unwatch na propriedade fornecida na primeira chamada de callback.

// Isso causará um erro
const unwatch = vm.$watch(
  'value',
  function() {
    doSomething()
    unwatch()
  },
  { immediate: true }
)

1
2
3
4
5
6
7
8
9

Se você ainda quiser chamar uma função unwatch dentro do callback, verifique primeiro sua disponibilidade:

let unwatch = null

unwatch = vm.$watch(
  'value',
  function() {
    doSomething()
    if (unwatch) {
      unwatch()
    }
  },
  { immediate: true }
)

1
2
3
4
5
6
7
8
9
10
11
12

Opção: flush

A opção flush permite maior controle sobre o momento de acionamento do callback. Pode ser definido como 'pre', 'post' ou 'sync'.

O valor padrão é 'pre', que especifica que o callback deve ser invocado antes da renderização. Isso permite que o callback atualize outros valores antes que o template seja executado.

O valor 'post' pode ser usado para adiar o callback até depois da renderização. Isso deve ser usado se o callback precisar acessar o DOM atualizado ou componentes filho por meio de $refs.

Se flush for definido como 'sync', o callback será chamado de forma síncrona, assim que o valor mudar.

Para ambos 'pre' e 'post', o callback é armazenado em buffer usando uma fila. O callback será adicionado à fila apenas uma vez, mesmo que o valor observado seja alterado várias vezes. Os valores provisórios serão ignorados e não serão passados para o callback.

O armazenamento em buffer do callback não apenas melhora o desempenho, mas também ajuda a garantir a consistência dos dados. Os observadores não serão acionados até que o código que executa as atualizações de dados seja concluído.

Observadores 'sync' devem ser usados com moderação, pois eles não têm esses benefícios.

Para obter mais informações sobre flush, consulte Momento de Limpeza do Efeito.
Ver também: Observadores

# `$emit`

Argumentos:
- {string} eventName
- ...args (opcional)
Acionar um evento na instância atual. Quaisquer argumentos adicionais serão passados para a função callback do escutador.

Exemplos:

Usando $emit com apenas um nome de evento:

<div id="emit-example-simple">
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>

1
2
3

const app = createApp({
  methods: {
    sayHi() {
      console.log('Oi!')
    }
  }
})

app.component('welcome-button', {
  emits: ['welcome'],
  template: `
    <button v-on:click="$emit('welcome')">
      Clique-me para as boas vindas
    </button>
  `
})

app.mount('#emit-example-simple')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Usando $emit com argumentos adicionais:

<div id="emit-example-argument">
  <advice-component v-on:advise="showAdvice"></advice-component>
</div>

1
2
3

const app = createApp({
  methods: {
    showAdvice(advice) {
      alert(advice)
    }
  }
})

app.component('advice-component', {
  emits: ['advise'],
  data() {
    return {
      adviceText: 'Alguns conselhos'
    }
  },
  template: `
    <div>
      <input type="text" v-model="adviceText">
      <button v-on:click="$emit('advise', adviceText)">
        Clique em mim para enviar conselhos
      </button>
    </div>
  `
})

app.mount('#emit-example-argument')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Ver também:
- Opção emits
- Emitindo um Valor Com um Evento

# `$forceUpdate`

Uso:

Força a instância do componente a renderizar novamente. Observe que isso não afeta todos os componentes filho, apenas a própria instância e os componentes filho com conteúdo de slot inserido.

# `$nextTick`

Argumentos:
- {Function} callback (opcional)
Uso:

Adie o callback para ser executado após o próximo ciclo de atualização do DOM. Use-o imediatamente após alterar alguns dados para aguardar a atualização do DOM. Isso é o mesmo que o nextTick global, exceto que o contexto this do callback é automaticamente vinculado à instância que chama esse método.

Exemplo:

createApp({
  // ...
  methods: {
    // ...
    example() {
      // modifica os dados
      this.message = 'changed'
      // DOM ainda não foi atualizado
      this.$nextTick(function() {
        // DOM agora está atualizado
        // `this` está vinculado à instância atual
        this.doSomethingElse()
      })
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Ver também: nextTick

← Propriedades da Instância Diretivas →

# Métodos de Instância

# $watch

# $emit

# $forceUpdate

# $nextTick

# `$emit`

# `$forceUpdate`

# `$nextTick`