DEV Community: Stefany Repetcki

[Boost]

Stefany Repetcki — Mon, 11 Aug 2025 13:06:08 +0000

SSR, SSG e SPA no Nuxt: o que são, e quando utilizar cada um?

Isabela Karkache ・ Aug 5

Composables - Funções Reutilizáveis na Composition API

Stefany Repetcki — Tue, 22 Apr 2025 23:41:41 +0000

🎯 O que são Composables?

Composables são funções criadas para organizar e reutilizar a lógica de forma modular dentro da Composition API. Eles permitem que você extraia a lógica de componentes e compartilhe-a em diferentes partes da aplicação.

🔹 Como criar um Composable?

Um composable é uma função JavaScript que usa recursos da Composition API (como ref, reactive, computed, entre outros).

Exemplo de um composable simples:

// useContador.js
import { ref } from 'vue'

export function useContador() {
  const contador = ref(0)

  const incrementar = () => {
    contador.value++
  }

  const resetar = () => {
    contador.value = 0
  }

  return {
    contador,
    incrementar,
    resetar
  }
}

🔹 Como usar um Composable dentro de um componente?

Após criar o composable, você pode utilizá-lo em qualquer componente da aplicação. Basta importá-lo e chamá-lo dentro do setup() do componente.

Exemplo de componente usando o composable:

<template>
  <div>
    <p>Contador: {{ contador }}</p>
    <button @click="incrementar">Incrementar</button>
    <button @click="resetar">Resetar</button>
  </div>
</template>

<script>
import { useContador } from './useContador'

export default {
  setup() {
    const { contador, incrementar, resetar } = useContador()

    return { contador, incrementar, resetar }
  }
}
</script>

🔹 Por que usar Composables?

Reusabilidade: Crie uma lógica em um único lugar e use-a em vários componentes.
Legibilidade: Mantenha os componentes mais limpos e organizados.
Manutenção: Facilite a manutenção e refatoração do código.
Testabilidade: Teste composables de forma isolada.

🔹 Exemplo Avançado: Composables com `watch` e `computed`

Você pode utilizar hooks como watch e computed dentro dos composables para criar comportamentos mais complexos.

Exemplo com watch e computed:

// useDados.js
import { ref, computed, watch } from 'vue'

export function useDados() {
  const nome = ref('')
  const idade = ref(0)

  // Computed para calcular a idade em 10 anos
  const idadeFutura = computed(() => idade.value + 10)

  // Watch para monitorar mudanças no nome
  watch(nome, (novoNome, nomeAntigo) => {
    console.log(`Nome mudou de ${nomeAntigo} para ${novoNome}`)
  })

  return {
    nome,
    idade,
    idadeFutura
  }
}

Como usar esse composable dentro de um componente?

<template>
  <div>
    <p>Nome: <input v-model="nome" /></p>
    <p>Idade: <input v-model="idade" type="number" /></p>
    <p>Idade em 10 anos: {{ idadeFutura }}</p>
  </div>
</template>

<script>
import { useDados } from './useDados'

export default {
  setup() {
    const { nome, idade, idadeFutura } = useDados()

    return { nome, idade, idadeFutura }
  }
}
</script>

⚡ Composables e a Reatividade

Os composables podem ser usados para encapsular a lógica reativa. Você pode usar ref, reactive, computed, e watch para gerenciar dados dinâmicos e reativos dentro de funções reutilizáveis.

📝 Resumo Rápido

Característica	Descrição
O que são Composables	Funções reutilizáveis que encapsulam lógica reativa e comportamentos dinâmicos.
Vantagens	Reusabilidade, manutenção facilitada, legibilidade e testabilidade.
Como Usar	Crie funções utilizando hooks como `ref`, `computed`, e `watch`, e utilize-as em qualquer componente.

🚀 Dica Final

Composables são poderosos porque permitem abstrair lógica e compartilhá-la em toda a sua aplicação, sem necessidade de duplicar código ou depender de mixins, como acontecia nas versões anteriores do Vue.

Se quiser criar uma aplicação mais escalável e modular, sempre que tiver alguma lógica complexa ou que se repete em múltiplos componentes, pense em criar um composable para ela.

Vue - Props e Contexto no setup()

Stefany Repetcki — Tue, 22 Apr 2025 23:28:29 +0000

Na Composition API, o setup() recebe dois argumentos: props e context.

🧩 1. Recebendo Props no `setup()`

O primeiro argumento do setup() são as props recebidas pelo componente.

export default {
  props: {
    titulo: String
  },
  setup(props) {
    console.log(props.titulo) // Acessa a prop 'titulo'
    return {}
  }
}

✅ As props são reativas! Mas não podem ser diretamente modificadas (são somente leitura).

💡 Exemplo com `props`:

export default {
  props: {
    nome: String
  },
  setup(props) {
    const saudacao = `Olá, ${props.nome}!`
    return { saudacao }
  }
}

🧩 2. Usando o Contexto

O segundo argumento é um objeto chamado context, que contém:

Propriedade	Descrição
`attrs`	Atributos passados ao componente que não são declarados como props como `class` ou `id`
`slots`	Slots passados ao componente
`emit`	Função para emitir eventos personalizados

🔍 Exemplo:

export default {
  props: ['nome'],
  setup(props, context) {
    console.log(context.attrs)   // { id: 'meu-componente' } (se não for uma prop)
    console.log(context.slots)   // Acesso aos slots
    context.emit('clicado')      // Emite evento
    return {}
  }
}

📤 Emitindo eventos com `emit`

Você pode emitir eventos personalizados usando context.emit.

export default {
  setup(props, { emit }) {
    const clicar = () => {
      emit('meu-evento')
    }

    return { clicar }
  }
}

E no template:

<MeuComponente @meu-evento="fazerAlgo" />

📝 Resumo Rápido

Item	Forma de Acesso	Observações
Props	`setup(props)`	Reativas e somente leitura
Atributos extras	`context.attrs`	Não declarados em `props`
Slots	`context.slots`	Acessa conteúdo dos slots
Emitir evento	`context.emit()`	Dispara eventos para o componente pai

📌 Dica: Você pode desestruturar o segundo argumento:

setup(props, { emit, attrs, slots })

-> Adicional

🔄 Uso combinado de attrs e slots

<template>
  <div :class="attrs.class">
    <slot></slot>
  </div>
</template>

<script>
export default {
  setup(props, { attrs }) {
    return { attrs }
  }
}
</script>

<MyComponent class="minha-classe">
  <p>Conteúdo dinâmico aqui!</p>
</MyComponent>

Vue - Hooks de Ciclo de Vida no setup()

Stefany Repetcki — Tue, 22 Apr 2025 23:13:57 +0000

⏳ O que são os hooks de ciclo de vida?

Os hooks de ciclo de vida são funções que permitem executar código em momentos específicos do ciclo de vida de um componente Vue, como quando ele é montado, atualizado ou destruído.

Na Options API, você talvez se lembre de métodos como:

mounted() {
  console.log('Componente montado')
}

Na Composition API, esses mesmos momentos são controlados por funções importadas do Vue dentro do setup().

📦 Principais hooks de ciclo de vida

Você pode importar os hooks diretamente do vue:

import { onMounted, onUpdated, onUnmounted } from 'vue'

🔹 `onMounted()`

Executa uma função depois que o componente for montado no DOM.

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Componente montado!')
    })
  }
}

🔹 `onUpdated()`

Executa uma função toda vez que o componente for atualizado (por exemplo, quando um valor reativo muda e o DOM é re-renderizado).

import { onUpdated } from 'vue'

export default {
  setup() {
    onUpdated(() => {
      console.log('Componente atualizado!')
    })
  }
}

🔹 `onUnmounted()`

Executa uma função quando o componente for destruído, como ao sair da tela ou ser removido.

import { onUnmounted } from 'vue'

export default {
  setup() {
    onUnmounted(() => {
      console.log('Componente destruído!')
    })
  }
}

🛠️ Outros hooks úteis

Hook	Quando é executado
`onBeforeMount`	Antes do componente ser montado
`onBeforeUpdate`	Antes de uma atualização
`onBeforeUnmount`	Antes do componente ser destruído

Todos esses hooks devem ser chamados dentro do setup().

🧪 Exemplo prático com todos os hooks

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      console.log('Antes de montar')
    })

    onMounted(() => {
      console.log('Montado')
    })

    onBeforeUpdate(() => {
      console.log('Antes de atualizar')
    })

    onUpdated(() => {
      console.log('Atualizado')
    })

    onBeforeUnmount(() => {
      console.log('Antes de desmontar')
    })

    onUnmounted(() => {
      console.log('Desmontado')
    })
  }
}

✅ Conclusão

Hooks de ciclo de vida te permitem executar ações em momentos específicos do ciclo de vida do componente.
São muito úteis para tarefas como buscar dados, limpar timers ou recursos, e depurar atualizações.
Eles são usados dentro do setup() na Composition API, com nomes como onMounted, onUnmounted, etc.

E o created? Tudo o que você coloca dentro de setup() é executado no mesmo momento que o created() da Options API seria chamado.

export default {
  setup() {
    console.log('Componente criado (setup iniciado)')

    // Lógica que seria do created()
    return {}
  }
}

logo não existe mais o equivalente ao beforeCreate()

💡 Dica extra

Você pode combinar esses hooks com valores reativos ou watchers para ter comportamentos dinâmicos mais avançados no seu componente!

Vue - Objetos: Mutáveis, Imutáveis ou Fixos

Stefany Repetcki — Tue, 22 Apr 2025 23:01:12 +0000

🤔 Quando não usar `reactive()`?

Em algumas situações, você pode não precisar de reatividade para um objeto e, nesses casos, pode criar um objeto simples sem usar o reactive(). Isso é útil quando você tem um objeto cujas propriedades não vão mudar e não precisam ser observadas pelo Vue.

Criando um objeto simples sem reatividade

Quando você cria um objeto simples em JavaScript, ele não é reativo. Ou seja, se você mudar as propriedades desse objeto, o Vue não irá refletir essas alterações automaticamente na interface.

Exemplo de objeto simples:

const pessoa = {
  nome: 'Lucas',
  idade: 23
}

Neste caso, o objeto pessoa é estático, ou seja, não será reativo. Se você mudar o valor das suas propriedades diretamente, o Vue não vai atualizar automaticamente a UI.

Garantindo que o objeto não seja modificado

Se você quiser garantir que o objeto não seja alterado acidentalmente, pode usar o Object.freeze(). Isso torna o objeto imutável — ou seja, suas propriedades não podem ser modificadas depois que o objeto é criado.

Exemplo com Object.freeze():

const pessoa = Object.freeze({
  nome: 'Lucas',
  idade: 23
})

Neste caso, pessoa é imutável. Tentar modificar qualquer propriedade de pessoa resultará em erro no modo estrito (se estiver ativado) ou simplesmente será ignorado. Além disso, o Vue não observará mudanças neste objeto, já que ele não é reativo.

Resumo

Objeto simples: Se não precisa de reatividade, crie o objeto normalmente, sem usar reactive().
Imutabilidade: Para garantir que o objeto não seja alterado, use Object.freeze().
Reatividade: Se precisar que o objeto seja reativo, utilize reactive() ou ref().

Essas abordagens ajudam a controlar quando a reatividade do Vue é necessária e quando você pode optar por objetos simples sem essa sobrecarga.

Vue - Usando watchEffect e reactive para maior controle

Stefany Repetcki — Tue, 22 Apr 2025 22:57:44 +0000

🎯 O que é o `watchEffect()`?

O watchEffect() é um hook poderoso da Composition API que executa reatividade de forma automática e pode ser usado quando você deseja observar efeitos colaterais (side effects) baseados em mudanças reativas.

Diferente do watch(), que é usado para observar valores específicos, o watchEffect() observa todos os valores reativos usados dentro da sua função de forma automática.
Ele executa sempre que qualquer uma das dependências internas mudar, o que o torna muito útil para acompanhar mudanças em valores dinâmicos sem a necessidade de especificar as dependências explicitamente.

Como funciona o `watchEffect()`?

import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const contador = ref(0)
    const nome = ref('Vue')

    watchEffect(() => {
      console.log(`O contador é: ${contador.value}, o nome é: ${nome.value}`)
    })

    const incrementar = () => {
      contador.value++
    }

    return { contador, nome, incrementar }
  }
}

O que está acontecendo aqui?

watchEffect() observa automaticamente todas as dependências reativas dentro da função de callback (no caso, contador e nome).
Sempre que contador ou nome mudarem, o watchEffect executará a função de callback novamente, exibindo no console o valor atualizado de ambos.

📌 Diferença entre `watch()` e `watchEffect()`

watch(): Reage a valores específicos (você escolhe o que quer observar).
watchEffect(): Reage a todas as dependências reativas dentro da função (não é necessário especificar as dependências).

🧩 Utilizando `reactive()` com objetos complexos

O reactive() é útil para criar objetos reativos. Quando você usa o reactive(), o Vue automaticamente faz com que todas as propriedades do objeto sejam reativas.

Exemplo com `reactive()`:

import { reactive } from 'vue'

export default {
  setup() {
    const pessoa = reactive({
      nome: 'Lucas',
      idade: 23
    })

    const mudarNome = () => {
      pessoa.nome = 'João'
    }

    return { pessoa, mudarNome }
  }
}

O que está acontecendo aqui?

pessoa é um objeto reativo, e suas propriedades (nome e idade) serão automaticamente reativas.
mudarNome() altera o nome de pessoa e, por ser reativo, a interface do usuário será atualizada automaticamente.

📌 Como funciona a reatividade com objetos no `reactive()`?

Quando você usa reactive(), todas as propriedades do objeto se tornam reativas.
O Vue não precisa de .value para acessar as propriedades de um objeto reativo — basta acessar diretamente a propriedade, como se fosse um objeto normal.

⚡ Exemplo prático: Contador com `reactive()` e `watchEffect()`

import { reactive, watchEffect } from 'vue'

export default {
  setup() {
    const estado = reactive({
      contador: 0,
      nome: 'Vue'
    })

    watchEffect(() => {
      console.log(`Contador: ${estado.contador}, Nome: ${estado.nome}`)
    })

    const incrementar = () => {
      estado.contador++
    }

    return { estado, incrementar }
  }
}

Aqui, o estado é reativo, e o watchEffect() monitora todas as mudanças feitas em estado e executa a função toda vez que qualquer propriedade muda.

✅ Conclusão

O watchEffect() é útil quando você deseja reagir a todas as dependências reativas automaticamente dentro de uma função.
O reactive() transforma objetos em reativos, o que significa que suas propriedades também são automaticamente observadas.
Ambos são extremamente úteis para criar componentes e lógica de reatividade complexos de maneira simples e poderosa.

📌 Resumo rápido: `watchEffect()` e `reactive()`

Funcionalidade	`watchEffect()`	`reactive()`
O que é?	Observa todas as dependências reativas dentro da função.	Torna objetos e arrays reativos.
Como funciona?	Executa a função toda vez que qualquer dependência reativa mudar.	Todas as propriedades de um objeto se tornam reativas.
Necessita de retorno?	Não, o foco é a execução da função.	Não, você acessa diretamente as propriedades reativas.

Vue com composition API - Computed e Watch

Stefany Repetcki — Tue, 22 Apr 2025 22:48:13 +0000

🎯 Por que usar `computed()`?

O computed() serve para criar valores derivados com base em dados reativos. Ele é recalculado automaticamente sempre que os dados que ele depende mudam.

💡 Exemplo com `computed()`

import { ref, computed } from 'vue'

export default {
  setup() {
    const nome = ref('Maria')

    const saudacao = computed(() => {
      return `Olá, ${nome.value}!`
    })

    return { nome, saudacao }
  }
}

O que está acontecendo aqui?

nome é um valor reativo.
saudacao é um valor computado que depende de nome.
Quando nome.value muda, saudacao é atualizado automaticamente.

🔍 Computed vs Função

Por que não usar uma função comum?

function saudacao() {
  return `Olá, ${nome.value}`
}

Essa função também funciona, mas ela será executada toda vez que o componente for renderizado, enquanto computed() guarda em cache o valor até que as dependências mudem.

🕵️‍♂️ Observando mudanças com `watch()`

O watch() permite reagir a mudanças em valores reativos, executando um código sempre que uma mudança ocorrer.

💡 Exemplo com `watch()`

import { ref, watch } from 'vue'

export default {
  setup() {
    const contador = ref(0)

    watch(contador, (novoValor, valorAntigo) => {
      console.log(`Contador mudou de ${valorAntigo} para ${novoValor}`)
    })

    const incrementar = () => contador.value++

    return { contador, incrementar }
  }
}

O que está acontecendo aqui?

watch() observa o valor de contador.
Quando contador.value muda, ele executa a função fornecida.
Essa função recebe dois parâmetros:
- novoValor: o novo valor da variável reativa.
- valorAntigo: o valor anterior antes da mudança.

🔁 Observando objetos reativos com `watch`

Quando você usa reactive(), é necessário usar { deep: true } para observar mudanças internas no objeto.

import { reactive, watch } from 'vue'

export default {
  setup() {
    const usuario = reactive({ nome: 'João', idade: 30 })

    watch(
      () => usuario,
      (novo, antigo) => {
        console.log('Usuário mudou!', novo)
      },
      { deep: true }
    )

    return { usuario }
  }
}

✅ Conclusão do Capítulo 3

Conceito	Quando usar?
`computed`	Quando você precisa de um valor derivado que dependa de outros valores reativos. Ele é memoizado (guardado em cache). Ideal para exibir no template.
`watch`	Quando você precisa executar efeitos colaterais com base em mudanças de valores reativos, como fazer requisições ou logar valores.

📌 Adicional: Diferença entre `computed()` e `watch()`

🎯 Por que no `computed()` você coloca dentro de uma `const` e no `watch()` não precisa?

1. `computed()`

O computed() é um valor derivado que depende de outros dados reativos. Ele não é uma função comum, mas sim um objeto reativo que automaticamente calcula e atualiza seu valor conforme as dependências mudam.

computed() retorna um objeto reativo, que precisa ser armazenado em uma variável (por isso, usamos const).
O valor resultante de computed() é acessado com .value se for uma referência reativa, mas, internamente, o Vue trata isso como uma forma otimizada de recalcular o valor quando necessário.

Ou seja, ao usar const com computed(), você está criando um "valor reativo" que será atualizado conforme o estado que ele depende.

const saudacao = computed(() => {
  return `Olá, ${nome.value}!`
})

Aqui, saudacao é um valor computado e reagirá automaticamente a qualquer mudança em nome (ou outras variáveis reativas que você use dentro de computed()).

2. `watch()`

O watch() não é um valor, mas sim um observador — ele não precisa ser armazenado em uma constante porque o seu objetivo é apenas "observar mudanças" e executar algum código quando essas mudanças ocorrem.

O watch é executado automaticamente quando a variável observada muda.
Ele não retorna um valor, apenas executa a função de callback que você forneceu.

Por isso, não é necessário armazenar o resultado de watch() em uma constante, já que você está mais interessado na execução de uma ação do que no valor em si.

watch(contador, (novoValor, valorAntigo) => {
  console.log(`Contador mudou de ${valorAntigo} para ${novoValor}`)
})

Aqui, watch apenas observará contador e executará a função de callback sempre que o valor de contador mudar. Não há necessidade de armazenar esse observador.

Resumo

computed(): cria um valor reativo derivado e precisa ser armazenado em uma variável (const).
watch(): é um observador de mudanças, que não retorna um valor, por isso, não precisa ser armazenado.

Conceito base do setup()

Stefany Repetcki — Tue, 22 Apr 2025 22:31:24 +0000

🤔 O que é o `setup()`?

O setup() é a função principal da Composition API. É onde você define e organiza a lógica reativa e a interação entre os dados e o comportamento do componente.

Como funciona o `setup()`?

O setup() é executado antes do componente ser criado, portanto, ele não tem acesso a this.
Ele recebe dois parâmetros:
1. props: As propriedades do componente (como data() na Options API)
2. context: Um objeto que fornece acesso a algumas funcionalidades internas, como attrs, slots e emit.

Dentro do setup(), você pode usar qualquer lógica reativa e retornar as variáveis e funções que você deseja expor ao template.

🧠 Compreendendo a reatividade: `ref` e `reactive`

Como funciona o `ref()`

O ref() é usado para criar valores reativos.
Ideal para valores primitivos (números, strings, booleans).
A propriedade value é usada para acessar o valor armazenado.

Exemplo com `ref()`:

import { ref } from 'vue'

export default {
  setup() {
  const contador = ref(0)

  const incrementar = () => {
    contador.value++
  }

  return { contador, incrementar }
  }
}

No exemplo acima, o valor contador é reativo e, ao ser alterado, o Vue automaticamente atualiza a interface do usuário.

Como funciona o `reactive()`

O reactive() é usado para criar objetos ou arrays reativos.
Ele trabalha diretamente sobre o objeto ou array, sem a necessidade de acessar a propriedade value.

`Exemplo com reactive():`

import { reactive } from 'vue'

export default {
  setup() {
    const estado = reactive({
      contador: 0,
      nome: 'Vue'
    })

    const incrementar = () => {
      estado.contador++
    }

    return { estado, incrementar }
  }
}

No exemplo acima, o objeto estado é reativo, e você pode acessar ou modificar suas propriedades diretamente.

🧩 O que mais podemos fazer no `setup()`?

computed(): Cria valores derivados com base em reatividade.
watch(): Observa mudanças nos valores reativos e executa ações quando esses valores mudam.
Outros hooks de ciclo de vida: Como onMounted(), onUpdated(), onBeforeUnmount(), entre outros.

⚡ Exemplo prático: Contador simples com `ref()` e `reactive()` e `computed()`

import { ref, reactive, computed } from 'vue'

export default {
  setup() {
    const contador = ref(0)
    const estado = reactive({
      nome: 'Vue'
    })

    const mensagem = computed(() => {
      return `Contador: ${contador.value}`
    })

    const incrementar = () => {
      contador.value++
    }

    return { contador, estado, incrementar, mensagem }
  }
}

O que está acontecendo aqui?

contador é uma referência (ref) a um número, e é usado para armazenar o valor do contador.
estado é um objeto reativo com a propriedade nome.
mensagem é um valor computado que depende de contador.
incrementar é uma função que aumenta o valor do contador.

✅ Conclusão

O setup() é o coração da Composition API e é onde você vai colocar a maior parte da lógica reativa.
Entender o uso de ref() e reactive() é fundamental para trabalhar com dados dinâmicos e interativos.

😄 Adicional

Quando você precisa do return:

Quando você quer que variáveis ou funções definidas dentro do setup() fiquem disponíveis no seu template (ou seja, no HTML do componente), aí sim você precisa retornar elas.

<template>
  <button @click="incrementar">Contar: {{ contador }}</button>
</template>

<script setup>
import { ref } from 'vue'

const contador = ref(0)

function incrementar() {
  contador.value++
}
</script>

⚠️ Neste exemplo usamos <script setup>, que já faz o return automaticamente. Mas se você estiver usando o setup() dentro do export default, aí você precisa fazer o return manualmente:

export default {
  setup() {
    const contador = ref(0)

    function incrementar() {
      contador.value++
    }

    // Retornar para usar no template
    return { contador, incrementar }
  }
}

❌ Quando você não precisa do return:

Se você estiver criando um componente puramente lógico, como um composable (função reativa reutilizável), ou se o componente não tiver template, não precisa retornar nada pro template.

// composable: useContador.js
import { ref } from 'vue'

export function useContador() {
  const contador = ref(0)
  const incrementar = () => contador.value++
  return { contador, incrementar }
}

📌 Resumo rápido: Precisa de `return` no `setup()`?

Situação	Precisa de `return`?
Usar variáveis ou funções no template (`setup()`)	✅ Sim
Usando `<script setup>`	❌ Não (é automático)
Criando um composable (função reutilizável)	✅ Sim
Código interno sem uso no template	❌ Não

Por que Composition API?

Stefany Repetcki — Tue, 22 Apr 2025 21:55:20 +0000

🤔 O que é a Composition API?

A Composition API é uma forma moderna de escrever componentes no Vue 3. Ela oferece mais flexibilidade, organização e reutilização do que a abordagem tradicional, chamada de Options API.

A ideia principal é agrupar a lógica reativa por função, não por tipo de opção (data, methods, computed...).

🔄 Comparação: Options API vs Composition API

🧱 Options API (forma antiga)

export default {
  data() {
    return {
      contador: 0
    }
  },
  methods: {
    incrementar() {
      this.contador++
    }
  }
}

🧩 Composition API (forma nova)

import { ref } from 'vue'

export default {
  setup() {
    const contador = ref(0)
    const incrementar = () => contador.value++

    return {
      contador,
      incrementar
    }
  }
}

🎯 Por que usar a Composition API?

Vantagem	Descrição
🧠 Lógica mais agrupada	Funções e reatividade ficam juntas, facilitando a leitura e manutenção
🔁 Reutilização facilitada	É possível criar composables (funções reutilizáveis) com facilidade
🧰 Maior controle do componente	Você tem mais controle sobre reatividade, ciclo de vida e estado
📦 Pronto para apps modernos	Ideal para grandes projetos, Vue + TypeScript, Nuxt, etc

📦 Quando usar Composition API?

Projetos novos que usam Vue 3
Aplicações grandes, onde a lógica de cada componente é complexa
Quando você quer escrever código mais reutilizável
Se estiver usando Nuxt 3 (ele já incentiva Composition API por padrão)

❗ E quando não usar?

Projetos pequenos e simples podem se beneficiar da simplicidade da Options API
Se sua equipe inteira já domina bem a Options API, talvez a migração não seja prioridade

✅ Conclusão

A Composition API é uma evolução natural do Vue. Com ela, você ganha:

Melhor organização da lógica
Maior reutilização de código
Mais controle sobre o comportamento reativo

Diferença entre SPA e SSR

Stefany Repetcki — Sun, 16 Feb 2025 01:58:02 +0000

✅ SPA (Single Page Application) → Aplicação de Página Única

O Vue carrega tudo no navegador de uma vez só.
A navegação entre páginas é super rápida, porque o conteúdo é atualizado sem recarregar a página.
Problema: O SEO pode ser ruim porque os buscadores não veem o conteúdo gerado dinamicamente.

✅ SSR (Server-Side Rendering) → Renderização no Servidor

O Nuxt.js gera o HTML já pronto no servidor antes de enviá-lo para o navegador.
O site carrega mais rápido e melhora o SEO, pois os buscadores conseguem ver o conteúdo.
Problema: O servidor precisa trabalhar mais para gerar as páginas.

💡 Resumo:

SPA é ótimo para apps rápidos e interativos.
SSR é melhor para sites que precisam de SEO e carregamento rápido.

Dominando Vue.js em Entrevistas Técnicas: O Que Esperar e Como Responder

Stefany Repetcki — Sun, 16 Feb 2025 01:56:37 +0000

Guia Completo para Entrevistas Técnicas de Vue.js: Perguntas e Respostas

Se você está se preparando para uma entrevista técnica de Vue.js, este guia traz as perguntas mais comuns e como respondê-las da melhor forma. Vamos direto ao ponto! 🚀

1. Fundamentos do Vue.js

❓ O que é Vue.js e quais suas principais vantagens?

✅ Resposta: Vue.js é um framework progressivo para construção de interfaces interativas. Ele é leve, fácil de aprender, possui reatividade nativa e permite a criação de aplicações SPA e SSR. (Adicional -> Diferença entre SPA e SSR.)

❓ O que é o Virtual DOM no Vue?

✅ Resposta: O Virtual DOM é como uma "cópia" do DOM real que o Vue usa para fazer mudanças na tela de forma mais eficiente.

Em vez de alterar diretamente os elementos do site toda vez que algo muda, o Vue primeiro compara essa cópia com a versão anterior e só modifica o que realmente precisa. Isso deixa a página mais rápida e evita atualizações desnecessárias.

É como revisar um documento antes de imprimir: você só corrige os erros, em vez de reescrever tudo do zero!

❓ Qual a diferença entre Options API e Composition API?

✅ Resposta:

Options API: Organiza o código em seções (data, methods, computed, watch).
Composition API: Usa funções (setup()) para melhor reutilização de código e organização.

2. Diretivas e Templates

❓ Quais são as principais diretivas do Vue e para que servem?

✅ Resposta:

v-bind: Liga atributos dinamicamente
v-model: Faz two-way data binding
v-if / v-else / v-show: Renderização condicional
v-for: Iteração sobre listas
v-on (@): Lida com eventos (@click="handler")
v-slot: Trabalha com slots em componentes

❓ Qual a diferença entre `v-if` e `v-show`?

✅ Resposta:

v-if: Adiciona ou remove elementos do DOM (melhor para renderização condicional esporádica).
v-show: Usa display: none, mantendo o elemento no DOM (melhor para alternância frequente).

3. Reactividade e Estado

❓ Como funciona o sistema de reatividade do Vue 3?

✅ Resposta: O Vue usa Proxy para detectar mudanças nos dados e atualizar automaticamente a interface. Os principais recursos reativos são:

ref(): Para valores primitivos e objetos (const count = ref(0))
reactive(): Para objetos reativos complexos (const state = reactive({ count: 0 }))
computed(): Propriedades computadas
watch(): Observa mudanças nos dados

❓ Qual a diferença entre `computed` e `watch`?

✅ Resposta:

computed: Ideal para valores derivados e cacheados.
watch: Ideal para executar efeitos colaterais quando um dado muda.

4. Componentes e Comunicação

❓ Como os componentes no Vue se comunicam?

✅ Resposta:

De pai para filho: props
De filho para pai: emit
Entre componentes não relacionados: Pinia, Vuex ou um Event Bus
Slots: Para passar conteúdo dinâmico

❓ O que são slots no Vue?

✅ Resposta: Slots permitem passar HTML dinâmico para um componente. Exemplo:

<template>
  <Card>
    <template #header>Meu Título</template>
    <p>Conteúdo do Card</p>
  </Card>
</template>

No componente Card.vue:

<template>
  <div>
    <header><slot name="header" /></header>
    <slot />
  </div>
</template>

5. Vue Router e Navegação

❓ Como configurar o Vue Router?

✅ Resposta:

Instale:

   npm install vue-router

Crie um arquivo router.js:

   import { createRouter, createWebHistory } from 'vue-router';
   import Home from '../views/Home.vue';
   import About from '../views/About.vue';

   const routes = [
     { path: '/', component: Home },
     { path: '/about', component: About }
   ];

   const router = createRouter({
     history: createWebHistory(),
     routes
   });

   export default router;

No main.js:

   import { createApp } from 'vue';
   import App from './App.vue';
   import router from './router';

   createApp(App).use(router).mount('#app');

6. Vuex/Pinia (Gerenciamento de Estado)

❓ O que é Vuex e por que foi substituído pelo Pinia?

✅ Resposta: Vuex era o gerenciador de estado oficial do Vue, mas foi substituído pelo Pinia por ser mais leve, simples e compatível com Composition API.

❓ Como criar um store no Pinia?

✅ Resposta:

Instale:

   npm install pinia

Crie um store:

   import { defineStore } from 'pinia';

   export const useCounterStore = defineStore('counter', {
     state: () => ({ count: 0 }),
     actions: {
       increment() {
         this.count++;
       }
     }
   });

Use no componente:

   <script setup>
   import { useCounterStore } from '@/stores/counter';
   const counter = useCounterStore();
   </script>

   <template>
     <button @click="counter.increment()">Contador: {{ counter.count }}</button>
   </template>

7. Nuxt.js

❓ O que é o Nuxt.js e por que usá-lo?

✅ Resposta: Nuxt.js é um framework baseado no Vue que facilita o SSR (Server-Side Rendering), SSG (Static Site Generation) e otimiza SEO automaticamente.

❓ Como funciona o sistema de páginas automáticas do Nuxt?

✅ Resposta: No Nuxt, os arquivos dentro da pasta pages/ se tornam automaticamente rotas, sem necessidade de configurar o Vue Router.

/pages/index.vue    -> "/"
/pages/about.vue    -> "/about"

❓ O que é Middleware no Nuxt?

✅ Resposta: Middleware permite interceptar requisições antes de carregar uma página. Pode ser usado para autenticação.

export default defineNuxtRouteMiddleware((to, from) => {
  if (!isAuthenticated()) return navigateTo('/login');
});

Conclusão

Este guia abordou as perguntas mais comuns em entrevistas técnicas de Vue.js, desde os fundamentos até tópicos mais avançados como Pinia e Nuxt.js.

Se você gostou do conteúdo, deixe um comentário e compartilhe sua experiência! 🚀🔥

DEV Community: Stefany Repetcki

[Boost]

SSR, SSG e SPA no Nuxt: o que são, e quando utilizar cada um?

Isabela Karkache ・ Aug 5

Composables - Funções Reutilizáveis na Composition API

🎯 O que são Composables?

🔹 Como criar um Composable?

🔹 Como usar um Composable dentro de um componente?

🔹 Por que usar Composables?

🔹 Exemplo Avançado: Composables com watch e computed

Como usar esse composable dentro de um componente?

⚡ Composables e a Reatividade

📝 Resumo Rápido

🚀 Dica Final

Vue - Props e Contexto no setup()

🧩 1. Recebendo Props no setup()

💡 Exemplo com props:

🧩 2. Usando o Contexto

🔍 Exemplo:

📤 Emitindo eventos com emit

📝 Resumo Rápido

Vue - Hooks de Ciclo de Vida no setup()

⏳ O que são os hooks de ciclo de vida?

📦 Principais hooks de ciclo de vida

🔹 onMounted()

🔹 onUpdated()

🔹 onUnmounted()

🛠️ Outros hooks úteis

🧪 Exemplo prático com todos os hooks

✅ Conclusão

💡 Dica extra

Vue - Objetos: Mutáveis, Imutáveis ou Fixos

🤔 Quando não usar reactive()?

Criando um objeto simples sem reatividade

Garantindo que o objeto não seja modificado

Resumo

Vue - Usando watchEffect e reactive para maior controle

🎯 O que é o watchEffect()?

Como funciona o watchEffect()?

O que está acontecendo aqui?

📌 Diferença entre watch() e watchEffect()

🧩 Utilizando reactive() com objetos complexos

Exemplo com reactive():

O que está acontecendo aqui?

📌 Como funciona a reatividade com objetos no reactive()?

⚡ Exemplo prático: Contador com reactive() e watchEffect()

✅ Conclusão

📌 Resumo rápido: watchEffect() e reactive()

Vue com composition API - Computed e Watch

🎯 Por que usar computed()?

💡 Exemplo com computed()

O que está acontecendo aqui?

🔍 Computed vs Função

🕵️‍♂️ Observando mudanças com watch()

💡 Exemplo com watch()

O que está acontecendo aqui?

🔁 Observando objetos reativos com watch

✅ Conclusão do Capítulo 3

📌 Adicional: Diferença entre computed() e watch()

🎯 Por que no computed() você coloca dentro de uma const e no watch() não precisa?

1. computed()

2. watch()

Resumo

Conceito base do setup()

🤔 O que é o setup()?

Como funciona o setup()?

🧠 Compreendendo a reatividade: ref e reactive

Como funciona o ref()

Exemplo com ref():

Como funciona o reactive()

Exemplo com reactive():

🧩 O que mais podemos fazer no setup()?

⚡ Exemplo prático: Contador simples com ref() e reactive() e computed()

✅ Conclusão

😄 Adicional

Quando você precisa do return:

❌ Quando você não precisa do return:

📌 Resumo rápido: Precisa de return no setup()?

Por que Composition API?

🤔 O que é a Composition API?

🔹 Exemplo Avançado: Composables com `watch` e `computed`

🧩 1. Recebendo Props no `setup()`

💡 Exemplo com `props`:

📤 Emitindo eventos com `emit`

🔹 `onMounted()`

🔹 `onUpdated()`

🔹 `onUnmounted()`

🤔 Quando não usar `reactive()`?

🎯 O que é o `watchEffect()`?

Como funciona o `watchEffect()`?

📌 Diferença entre `watch()` e `watchEffect()`

🧩 Utilizando `reactive()` com objetos complexos

Exemplo com `reactive()`:

📌 Como funciona a reatividade com objetos no `reactive()`?

⚡ Exemplo prático: Contador com `reactive()` e `watchEffect()`

📌 Resumo rápido: `watchEffect()` e `reactive()`

🎯 Por que usar `computed()`?

💡 Exemplo com `computed()`

🕵️‍♂️ Observando mudanças com `watch()`

💡 Exemplo com `watch()`

🔁 Observando objetos reativos com `watch`

📌 Adicional: Diferença entre `computed()` e `watch()`

🎯 Por que no `computed()` você coloca dentro de uma `const` e no `watch()` não precisa?

1. `computed()`

2. `watch()`

🤔 O que é o `setup()`?

Como funciona o `setup()`?

🧠 Compreendendo a reatividade: `ref` e `reactive`

Como funciona o `ref()`

Exemplo com `ref()`:

Como funciona o `reactive()`

`Exemplo com reactive():`

🧩 O que mais podemos fazer no `setup()`?

⚡ Exemplo prático: Contador simples com `ref()` e `reactive()` e `computed()`

📌 Resumo rápido: Precisa de `return` no `setup()`?

❓ Qual a diferença entre `v-if` e `v-show`?

❓ Qual a diferença entre `computed` e `watch`?