2nd/10_Wiki/Topics/Frontend/Options API.md

---
id: wiki-2026-0508-options-api
title: Vue Options API
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Options API, Vue 2 Options API, Vue Options]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [vue, vue2, options-api, frontend, framework]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: JavaScript
  framework: 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
```vue
<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
```js
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)
```js
import { mapState, mapActions } from "vuex";

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

### Mixins (매 legacy reuse)
```js
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)
```ts
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)
```vue
<!-- 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-3]]
- 변형: [[Composition-API]]
- 응용: [[Vuex]] · [[Pinia]]
- Adjacent: [[Mixins]] · [[Composables]]

## 🤖 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 패턴 |