Sintaxe

Options API

Vue.js Options API vs Composition API

A Options API é a forma tradicional e mais conhecida de escrever componentes em Vue.js, presente desde as versões iniciais do framework. Nela, a estrutura do componente é organizada por "seções" bem definidas, como:

data() → para dados reativos
methods → para funções e lógica
computed → para propriedades derivadas
watch → para observar mudanças de valores

Essa abordagem é muito amigável para iniciantes, pois separa claramente os diferentes aspectos do componente, tornando o código mais fácil de entender no início.

Ideal para: projetos simples, pessoas em fase de aprendizado ou times que já usam Vue 2.

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8" />
  <title>Login - Options API</title>
</head>
<body>
  <div id="app">
    <h2>Login (Options API)</h2>
    <form @submit.prevent="fazerLogin">
      <input type="text" v-model="usuario" placeholder="Usuário" /><br />
      <input type="password" v-model="senha" placeholder="Senha" /><br />
      <button type="submit">Entrar</button>
    </form>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
  <script>
    
    Vue.createApp({
      data() {
        return {
          usuario: '',
          senha: ''
        }
      },
      methods: {
        fazerLogin() {
          console.log('Usuário:', this.usuario)
          console.log('Senha:', this.senha)
        }
      }
    }).mount('#app')
    
  </script>
</body>
</html>

Composition API

A Composition API, introduzida no Vue 3, é uma nova forma de organizar a lógica do componente, baseada em uma única função chamada setup().

Dentro do setup(), você pode usar funções reativas como ref(), reactive(), computed() e organizar o código por função e responsabilidade, e não apenas por tipo (dados, métodos, etc).

Essa abordagem oferece mais flexibilidade, reuso de lógica e escalabilidade, especialmente útil em componentes grandes ou aplicações complexas.

Ideal para: projetos modernos, componentes reutilizáveis, ou quando você quer mais controle e organização por "funções" ao invés de "categorias".

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8" />
  <title>Login - Composition API</title>
</head>
<body>
  <div id="app">
    <h2>Login (Composition API)</h2>
    <form @submit.prevent="fazerLogin">
      <input type="text" v-model="usuario" placeholder="Usuário" /><br />
      <input type="password" v-model="senha" placeholder="Senha" /><br />
      <button type="submit">Entrar</button>
    </form>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
  <script>
    
    const { createApp, ref } = Vue

    createApp({
      setup() {
        const usuario = ref('')
        const senha = ref('')

        const fazerLogin = () => {
          console.log('Usuário:', usuario.value)
          console.log('Senha:', senha.value)
        }

        return {
          usuario,
          senha,
          fazerLogin
        }
      }
    }).mount('#app')
    
  </script>
</body>
</html>

Comparação Rápida

Aspecto	Options API	Composition API
Organização	Baseada em `data`, `methods`	Baseada em funções dentro de `setup()`
Clareza inicial	Mais legível para iniciantes	Pode parecer mais "técnico" no começo
Escalabilidade	Pode ficar fragmentada	Mais coeso em grandes componentes
Reatividade	Automática via `this`	Usando `ref()` ou `reactive()`

<script>
  
  import { ref } from 'vue'

  export default {
    setup() {
      const usuario = ref('')
      const senha = ref('')

      const fazerLogin = () => {
        console.log('Usuário:', usuario.value)
        console.log('Senha:', senha.value)
      }

      // ⚠️ Precisa retornar tudo que o template vai usar
      return {
        usuario,
        senha,
        fazerLogin
      }
    }
  }
  
</script>

  // ❌ NÃO USAR COM Vue CDN
  import { ref } from 'vue'
  export default {
    setup() {
      const usuario = ref('')
      const senha = ref('')

      const fazerLogin = () => {
        console.log('Usuário:', usuario.value)
        console.log('Senha:', senha.value)
      }

      // ⚠️ Precisa retornar tudo que o template vai usar
      return {
        usuario,
        senha,
        fazerLogin
      }
    }
  }

Características:

Usado dentro de um objeto Vue tradicional (export default {}).
Você precisa retornar manualmente as variáveis e funções que serão usadas no template.
Permite misturar com outras APIs do Vue (como Options API).

`<script setup>`

Esse é um atalho mais moderno e simplificado para escrever componentes com Composition API. Foi introduzido no Vue 3.2.

❌ <script setup> NÃO pode ser usado com CDN:

Essa abordagem não funciona com CDN diretamente.
Por quê? Porque <script setup> só é válido dentro de Single File Components (.vue).
Ele precisa ser compilado por ferramentas como Vite, Vue CLI ou Nuxt.
Não dá pra usar em um simples HTML porque o navegador não entende essa sintaxe "especial".

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

  // ✅ Declarando variáveis normalmente
  const usuario = ref('')
  const senha = ref('')

  const fazerLogin = () => {
    console.log('Usuário:', usuario.value)
    console.log('Senha:', senha.value)
  }
  // ⚠️ Nada de return — tudo já fica visível no template automaticamente
  
</script>

Características:

Muito mais conciso: nada de export default, nem return.
Tudo que você declara no <script setup> já está automaticamente disponível no <template>.
Melhor performance e suporte total a TypeScript.
Usado somente em arquivos .vue (Single File Components).

Comparação rápida:

Característica	`setup()`	`<script setup>`
Estilo	Verboso, baseado em objeto	Conciso e direto
`return` necessário?	Sim	Não
Facilidade de leitura	Mais estruturado	Mais limpo e intuitivo
Indicado para	Projetos mistos (Options + Composition)	Projetos novos com Composition puro
Arquivo suportado	JS/TS comum ou SFC	Somente em Single File Component (`.vue`)

Quando usar cada um?

Use setup() se você estiver trabalhando com componentes Vue que ainda usam Options API, ou quer fazer uma transição gradual.
Use <script setup> se estiver começando um projeto novo, especialmente com Vite ou Nuxt 3, e quer o melhor da Composition API de forma moderna e elegante.

💡Memorize

Abordagem	Funciona com CDN?	Requer build tool?
Options API	✅ Sim	❌ Não
Composition API (`setup()`)	✅ Sim	❌ Não
`<script setup>`	❌ Não	✅ Sim (Vite, etc.)

CDN

Introdução

Hands-on

🎉 Avaliação do Evento Vue.js 🎉

Options API

Composition API

Comparação Rápida

setup() vs <script setup>

`setup()` (dentro de `script`)

Exemplo:

Características:

`<script setup>`

Características:

Comparação rápida:

Quando usar cada um?

💡Memorize