ComeOnOliver/skillshub

Vue

Baseado no Vue 3.5. Sempre use a Composition API com <script setup lang="ts">.

Preferências

• Prefira TypeScript em vez de JavaScript
• Prefira <script setup lang="ts"> em vez de <script>
• Para desempenho, prefira shallowRef em vez de ref se reatividade profunda não for necessária
• Sempre use a Composition API em vez da Options API
• Desencoraje o uso de Desestruturação de Props Reativas

Core

Tópico	Descrição	Referência
Script Setup e Macros	<script setup>, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, genéricos	script-setup-macros
Reatividade e Ciclo de Vida	ref, shallowRef, computed, watch, watchEffect, effectScope, hooks do ciclo de vida, composables	core-new-apis

Funcionalidades

Tópico	Descrição	Referência
Componentes e Diretivas Embutidos	Transition, Teleport, Suspense, KeepAlive, v-memo, diretivas customizadas	advanced-patterns

Referência Rápida

Modelo de Componente

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

const props = defineProps<{
  title: string
  count?: number
}>()

const emit = defineEmits<{
  update: [value: string]
}>()

const model = defineModel<string>()

const doubled = computed(() => (props.count ?? 0) * 2)

watch(() => props.title, (newVal) => {
  console.log('Título alterado:', newVal)
})

onMounted(() => {
  console.log('Componente montado')
})
</script>

<template>
  <div>{{ title }} - {{ doubled }}</div>
</template>

Importações Chave

// Reatividade
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'

// Observadores (Watchers)
import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'

// Ciclo de Vida
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'

// Utilitários
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'