<script setup> | 스크립트 setup 구문 |
ref(initialValue) | 반응형 참조 |
reactive(object) | 반응형 객체 |
computed(() => value) | 계산된 속성 |
readonly(state) | 읽기 전용 상태 |
toRef(obj, "key") | 속성에서 ref 생성 |
toRefs(obj) | refs로 변환 |
unref(ref) | ref 언래핑 |
watch(source, callback) | 단일 소스 감시 |
watch([a, b], ([a, b]) => {}) | 다중 감시 |
watch(source, cb, { deep: true }) | 깊은 감시 |
watch(source, cb, { immediate: true }) | 즉시 감시 |
watchEffect(() => {}) | 자동 추적 감시 |
watchPostEffect(() => {}) | Post-flush 감시 |
onMounted(() => {}) | 마운트 후 |
onUpdated(() => {}) | 업데이트 후 |
onUnmounted(() => {}) | 언마운트 전 |
onBeforeMount(() => {}) | 마운트 전 |
onBeforeUpdate(() => {}) | 업데이트 전 |
onBeforeUnmount(() => {}) | 언마운트 전 |
onErrorCaptured(() => {}) | 에러 캡처 |
v-bind:attr / :attr | 속성 바인딩 |
v-on:event / @event | 이벤트 리스너 |
v-model | 양방향 바인딩 |
v-if / v-else-if / v-else | 조건부 렌더링 |
v-show | 가시성 토글 |
v-for="item in items" | 리스트 렌더링 |
v-for="(item, index) in items" | 인덱스와 함께 |
:key="item.id" | 고유 키 |
@click.prevent | 기본 동작 방지 |
@click.stop | 전파 중지 |
@submit.prevent | 폼 제출 방지 |
@keyup.enter | 키 수식어 |
v-model.lazy | change에서 동기화 |
v-model.number | 숫자로 캐스트 |
v-model.trim | 공백 제거 |
ref="element" | 템플릿 ref |
v-slot:name / #name | 이름있는 슬롯 |
v-slot="{ data }" | 범위 슬롯 |
:class="{ active: isActive }" | 조건부 클래스 |
:style="{ color: activeColor }" | 동적 스타일 |
v-html="rawHtml" | 원시 HTML |
v-text="text" | 텍스트 내용 |
defineProps<{ title: string }>() | props 정의 (TS) |
defineProps({ title: String }) | props 정의 (JS) |
withDefaults(defineProps<>(), {}) | 기본값 있는 props |
defineEmits<{ (e: "change"): void }>() | emits 정의 (TS) |
emit("eventName", payload) | 이벤트 발생 |
v-model / defineModel() | 컴포넌트 v-model |
<slot /> | 기본 슬롯 |
<slot name="header" /> | 이름있는 슬롯 |
<slot :data="item" /> | 범위 슬롯 |
<template #header> | 이름있는 슬롯 사용 |
<template #default="{ item }"> | 범위 슬롯 사용 |
$slots.default | 슬롯 접근 |
provide("key", value) | 값 제공 |
provide("key", readonly(ref)) | 읽기 전용 제공 |
const value = inject("key") | 값 주입 |
inject("key", defaultValue) | 기본값과 함께 |
export function useFeature() { } | 컴포저블 생성 |
const { data, error } = useFeature() | 컴포저블 사용 |
return { state, methods } | 반응형 상태 반환 |
nextTick(() => {}) | DOM 업데이트 후 |
getCurrentInstance() | 현재 컴포넌트 인스턴스 |
defineExpose({ }) | 부모에 노출 |
useSlots() | 슬롯 접근 |
useAttrs() | 속성 접근 |
createRouter({ history, routes }) | 라우터 생성 |
createWebHistory() | HTML5 히스토리 |
createWebHashHistory() | 해시 모드 |
{ path: "/", component: Home } | 라우트 정의 |
{ path: "/user/:id", ... } | 동적 라우트 |
{ path: "/:pathMatch(.*)*" } | Catch-all 404 |
<router-link to="/path"> | 내비게이션 링크 |
<router-view /> | 라우트 아울렛 |
useRouter() | 라우터 인스턴스 |
useRoute() | 현재 라우트 |
router.push("/path") | 이동 |
router.replace("/path") | 히스토리 교체 |
router.go(-1) | 뒤로 가기 |
route.params.id | 라우트 매개변수 |
router.beforeEach((to, from) => {}) | 전역 before 가드 |
router.afterEach((to, from) => {}) | 전역 after 가드 |
beforeEnter: (to, from) => {} | 라우트별 가드 |
onBeforeRouteLeave((to, from) => {}) | 컴포넌트 떠남 가드 |
onBeforeRouteUpdate((to, from) => {}) | 컴포넌트 업데이트 가드 |
defineStore("name", { }) | 옵션 스토어 |
defineStore("name", () => { }) | Setup 스토어 |
state: () => ({ count: 0 }) | 상태 |
getters: { double: (state) => state.count * 2 } | 게터 |
actions: { increment() { this.count++ } } | 액션 |
const store = useStore() | 스토어 인스턴스 얻기 |
store.count | 상태 접근 |
store.double | 게터 접근 |
store.increment() | 액션 호출 |
storeToRefs(store) | 반응형 구조분해 |
store.$reset() | 상태 리셋 |
store.$patch({ count: 10 }) | 상태 패치 |