Vue.js - Iniciante | Methods

Definição

Os methods no Vue são funções que ficam dentro do componente e servem para executar ações, geralmente em resposta a eventos do usuário, como cliques, envios de formulário ou mudanças em inputs.

Enquanto as computed são usadas para calcular valores automaticamente, os methods são usados para fazer algo sob demanda, quando um evento acontece.

Eles ajudam a deixar o código mais organizado, separando a lógica de interação do restante do componente.

---

Exemplo básico

No HelloWorld.vue, poderíamos adicionar um method para controlar o contador.

<script setup lang="ts">
import { ref } from "vue"

defineProps<{ msg: string }>()

const count = ref(0)

// Definindo métodos
function incrementar() {
  count.value++
}

function resetar() {
  count.value = 0
}
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button @click="incrementar">Contar: {{ count }}</button>
    <button @click="resetar">Zerar</button>
  </div>
</template>

Aqui temos dois methods:

• incrementar() → aumenta o valor do contador em 1;

• resetar() → volta o contador para 0.

Essas funções são chamadas através dos eventos de clique (@click) nos botões.

---

Diferença entre methods e computed

É comum confundir methods com computed, mas eles têm propósitos diferentes:

• Computed são reativas e cacheadas, ou seja, só mudam quando suas dependências mudam.

• Methods executam toda vez que são chamados, sem cache.

Exemplo simples de diferença:

<script setup lang="ts">
import { ref, computed } from "vue"

const numero = ref(2)

function dobrarMethod() {
  return numero.value * 2
}

const dobrarComputed = computed(() => numero.value * 2)
</script>

<template>
  <p>Método: {{ dobrarMethod() }}</p>
  <p>Computed: {{ dobrarComputed }}</p>
</template>

Ambos mostram o dobro do número, mas o computed é atualizado automaticamente e só recalculado quando numero muda — enquanto o method é executado toda vez que o template é renderizado.

---

Exemplo prático no HelloWorld.vue

Vamos supor que queremos mostrar uma mensagem diferente conforme o valor do contador:

<script setup lang="ts">
import { ref } from "vue"

defineProps<{ msg: string }>()

const count = ref(0)

function incrementar() {
  count.value++
}

function mensagem() {
  if (count.value === 0) return "Clique para começar!"
  if (count.value < 5) return "Continue clicando..."
  return "Chegou longe!"
}
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button @click="incrementar">Contar: {{ count }}</button>
    <p>{{ mensagem() }}</p>
  </div>
</template>

Agora, cada vez que clicamos, além de aumentar o contador, a mensagem muda de acordo com o valor.

Isso mostra o papel principal dos methods: criar comportamentos e ações personalizadas dentro do componente.

---

Conclusão

Os methods são o jeito mais direto de adicionar lógica e comportamento aos componentes no Vue.

Eles permitem reagir a ações do usuário de forma clara e organizada, deixando o código fácil de entender e manter.

Em resumo:

• Use methods para ações (clicar, enviar, alterar).

• Use computed para valores derivados.

• E use watch quando precisar reagir a mudanças de forma mais complexa.

👉 No próximo passo, vamos ver Styles e Classes, entendendo como aplicar CSS no Vue e como alterar estilos automaticamente com base no estado reativo do componente.