2nd/10_Wiki/Topics/Frontend/Options API.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-options-api	Vue Options API	10_Wiki/Topics	verified	self	Options API Vue 2 Options API Vue Options	none	A	0.9	applied	vue vue2 options-api frontend framework		2026-05-10	pending	language framework JavaScript Vue

Vue Options API

매 한 줄

"매 Vue 2 의 object-shape component". Options API 매 data(), computed, methods, watch, lifecycle hook 의 named option 으로 component 정의. Vue 3 매 Composition API 가 default 이지만 Options API 매 여전히 supported — 매 small component / Vue 2 migration / 매 OOP 친화 팀의 sweet spot.

매 핵심

매 구조

• data() — reactive state factory.
• computed — derived state (cached).
• methods — handler / utility.
• watch — side effect on change.
• props — typed input.
• Lifecycle: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted.

매 vs Composition API

• Options: 매 organization by option type (all data together, all methods together).
• Composition: 매 organization by feature (state + logic for one concern colocated).
• 매 small / simple component → Options 매 OK. Large → Composition.

매 응용

1. 매 Vue 2 codebase 의 maintenance.
2. Junior-friendly component (매 명확한 named slot).
3. CMS / form-heavy app (매 state simple).
4. Migration: 매 Options → Composition 점진.

💻 패턴

Basic Options component

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}, Doubled: {{ doubled }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  name: "Counter",
  props: {
    title: { type: String, required: true },
    initial: { type: Number, default: 0 },
  },
  data() {
    return { count: this.initial };
  },
  computed: {
    doubled() { return this.count * 2; },
  },
  methods: {
    increment() { this.count++; },
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count: ${oldVal} → ${newVal}`);
    },
  },
  mounted() {
    console.log("mounted");
  },
};
</script>

Watcher with options

export default {
  data: () => ({ query: "" }),
  watch: {
    query: {
      handler(v) { this.search(v); },
      immediate: true,
      // deep: true (for object/array)
    },
  },
  methods: {
    async search(q) { /* ... */ },
  },
};

Vuex (Options-style mapState)

import { mapState, mapActions } from "vuex";

export default {
  computed: {
    ...mapState("user", ["profile", "loading"]),
  },
  methods: {
    ...mapActions("user", ["fetchProfile"]),
  },
  mounted() { this.fetchProfile(); },
};

Mixins (매 legacy reuse)

const fetchMixin = {
  data: () => ({ loading: false, data: null }),
  methods: {
    async fetch(url) {
      this.loading = true;
      this.data = await (await fetch(url)).json();
      this.loading = false;
    },
  },
};

export default {
  mixins: [fetchMixin],
  mounted() { this.fetch("/api/items"); },
};

TypeScript (Options + Vue.extend / defineComponent)

import { defineComponent } from "vue";

export default defineComponent({
  props: {
    user: { type: Object as () => { id: string; name: string }, required: true },
  },
  data() {
    return { likes: 0 as number };
  },
  computed: {
    label(): string {
      return `${this.user.name} (${this.likes})`;
    },
  },
  methods: {
    like() { this.likes++; },
  },
});

Options → Composition migration (1 component)

<!-- Before (Options) -->
<script>
export default {
  data: () => ({ count: 0 }),
  computed: { doubled() { return this.count * 2; } },
  methods: { inc() { this.count++; } },
};
</script>

<!-- After (Composition) -->
<script setup>
import { ref, computed } from "vue";
const count = ref(0);
const doubled = computed(() => count.value * 2);
const inc = () => count.value++;
</script>

매 결정 기준

상황	Approach
New Vue 3 project	Composition API (<script setup>)
Vue 2 → 3 migration	Options 유지 후 점진
Small component, junior team	Options OK
Complex feature, reuse logic	Composition + composables
Legacy mixin codebase	Options + 점진 composables

기본값: 매 new code 매 Composition. Options 매 maintenance / specific reason 만.

🔗 Graph

• 부모: Vue · Vue-3
• 변형: Composition-API · Class-Component-API
• 응용: Vuex · Pinia · Vue-Router
• Adjacent: Mixins · Composables · defineComponent

🤖 LLM 활용

언제: Vue 2 maintenance, simple component, OOP-trained team onboarding. 언제 X: 매 large feature with shared logic — Composition + composables 의 win.

❌ 안티패턴

• Mixin overuse: 매 name collision, source ambiguity. Composables 으로 대체.
• Arrow function in methods: this lost — 매 normal function 만.
• Mutate prop: 매 anti-pattern, warning. Emit + parent update.
• Heavy logic in computed: 매 non-pure side effect — watch 으로 분리.

🧪 검증 / 중복

• Verified (Vue 3 official docs — Options API, vuejs/composition-api migration guide).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — Options 구조, watcher/Vuex/mixin/TS, migration 패턴