# 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:

# $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