2nd/10_Wiki/Topics/Architecture/Vue_Architecture.md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-vue-architecture	Vue Architecture	10_Wiki/Topics	verified	self	Vue 3 Composition API Vue Reactivity	none	A	0.9	applied	vue reactivity composition-api frontend		2026-05-10	pending	language framework typescript vue3

Vue Architecture

매 한 줄

"매 Proxy 기반 매 fine-grained reactivity 매 Composition API 의 의 의 component logic". 매 Evan You 매 2014 출시, 매 Vue 3 (2020) 매 Proxy + Composition API 의 매 큰 redesign — 매 2026 매 Vue 3.5 + Vapor Mode (compile-time, no virtual DOM) 매 stable, Nuxt 3 매 Vue 3 ecosystem 의 backbone.

매 핵심

매 Reactivity (Proxy-based)

• ref(v): primitive wrapper, .value 매 access.
• reactive(obj): deep Proxy on object.
• computed(fn): lazy + cached derived.
• watch / watchEffect: side-effect tracking.
• 매 dependency 매 자동 collected — getter call 매 track, setter 매 trigger.

매 Composition API

• <script setup>: SFC 매 syntax sugar — import + ref + onMounted 매 top-level.
• defineProps, defineEmits, defineExpose, defineModel (Vue 3.4+).
• 매 logic 매 composable function (useX) 으로 매 추출 — React custom hook 의 매 equivalent.

매 응용

1. Nuxt 3 / 4: Vue 기반 meta-framework, SSR/SSG/ISR.
2. Vuetify, Element Plus, PrimeVue, Naive UI: component lib.
3. Pinia: 공식 store (Vuex 후속).
4. Vue Router 4: official routing.
5. VitePress: docs (Vue 매 dogfood).

💻 패턴

<script setup> basics

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

const count = ref(0);
const double = computed(() => count.value * 2);
function inc() { count.value++; }

onMounted(() => console.log("mounted"));
</script>

<template>
  <button @click="inc">{{ count }} (x2 = {{ double }})</button>
</template>

Composable (custom hook)

// useCounter.ts
import { ref, computed } from "vue";
export function useCounter(initial = 0) {
  const count = ref(initial);
  const double = computed(() => count.value * 2);
  function inc() { count.value++; }
  function reset() { count.value = initial; }
  return { count, double, inc, reset };
}

Props + emits + v-model (Vue 3.4 defineModel)

<script setup lang="ts">
const props = defineProps<{ disabled?: boolean }>();
const model = defineModel<string>({ required: true });
const emit = defineEmits<{ submit: [value: string] }>();

function onSubmit() { emit("submit", model.value); }
</script>

<template>
  <input v-model="model" :disabled="disabled" />
  <button @click="onSubmit">Send</button>
</template>

Pinia store

import { defineStore } from "pinia";

export const useCart = defineStore("cart", () => {
  const items = ref<{ id: string; qty: number }[]>([]);
  const total = computed(() => items.value.reduce((s, i) => s + i.qty, 0));
  function add(id: string) {
    const ex = items.value.find((i) => i.id === id);
    if (ex) ex.qty++; else items.value.push({ id, qty: 1 });
  }
  return { items, total, add };
});

Async component + Suspense

<script setup>
import { defineAsyncComponent } from "vue";
const Heavy = defineAsyncComponent(() => import("./HeavyChart.vue"));
</script>

<template>
  <Suspense>
    <template #default><Heavy /></template>
    <template #fallback>Loading…</template>
  </Suspense>
</template>

Provide / inject (typed)

// keys.ts
import type { InjectionKey, Ref } from "vue";
export const ThemeKey: InjectionKey<Ref<"light" | "dark">> = Symbol("theme");

// Parent.vue
import { provide, ref } from "vue";
const theme = ref<"light" | "dark">("dark");
provide(ThemeKey, theme);

// Child.vue
import { inject } from "vue";
const theme = inject(ThemeKey)!;

Watcher patterns

import { ref, watch, watchEffect } from "vue";
const query = ref("");

watch(query, async (q, prev, onCleanup) => {
  const ctrl = new AbortController();
  onCleanup(() => ctrl.abort());
  const r = await fetch(`/api?q=${q}`, { signal: ctrl.signal });
  // …
}, { debounce: 300 } as any); // VueUse 매 watchDebounced 권장

Vapor Mode (Vue 3.5+, compile-time, no VDOM)

<!-- @vue:vapor -->
<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
</script>
<template>
  <button @click="count++">{{ count }}</button>
</template>

매 결정 기준

상황	Approach
신규 Vue project	Vue 3.5 + <script setup> + Pinia + Vite
SSR / SSG / hybrid	Nuxt 3/4
작은 widget / island	Vue 3 standalone + Vapor Mode
Vue 2 legacy	Migration build → Vue 3 점진
Component lib 제작	Vue 3 + vite library mode

기본값: Vue 3.5 + Composition API + <script setup> + Pinia + TypeScript.

🔗 Graph

• 부모: Frontend Frameworks · Reactive Programming
• 변형: React · Svelte · Solid.js · Angular
• 응용: Nuxt 3 · VitePress · Pinia · Vue Router
• Adjacent: Composition API · Proxy Reactivity · Vapor Mode · VueUse

🤖 LLM 활용

언제: Vue SFC 작성, composable 추출, Pinia store 설계, Nuxt 3 page/server route. 언제 X: React-only ecosystem 매 require (Next.js / RSC), native mobile (use Vue Native lacks support — RN 의 React 권장).

❌ 안티패턴

• Reactive 의 destructure: const { x } = reactive(o) 매 reactivity loss — toRefs 사용.
• Mutating props: 매 read-only — defineModel / emit.
• Options API + Composition API 혼용: 한 component 매 일관.
• watch deep on huge object: performance hit — narrow target.
• Global state in ref module-level: SSR 매 cross-request leak — Pinia 사용.
• v-html with user input: XSS — sanitize 또는 component 사용.

🧪 검증 / 중복

• Verified (Vue 3.5 official docs, Evan You ViteConf 2025 keynote, Nuxt 4 release notes).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — Vue 3.5, Vapor Mode, Composition API patterns, Pinia