สรุป API ทั้งหมดโดยภาพรวม

1. การสร้างแอป (Global API)

| ฟังก์ชัน | คำอธิบาย | ||| | createApp(rootComponent, rootProps?) | สร้างแอป Vue หลัก | | app.mount(selectorOrContainer) | ติดตั้งแอปลงใน DOM | | defineComponent(options) | ช่วยให้ TS รู้ประเภทของ component | | nextTick(fn?) | รัน callback หลัง DOM อัปเดตเสร็จ |

import { createApp, defineComponent, nextTick } from 'vue';
const App = defineComponent({ /* ... */ });
const app = createApp(App);
app.mount('#app');

2. Options API (เดิมคุ้นเคย)

| อ็อปชัน | คำอธิบาย | ||| | data() | คืน object สำหรับ reactive state | | props | กำหนด props ที่รับเข้า component | | computed | กำหนด computed properties | | methods | ฟังก์ชันเมธอดภายใน component | | watch | สังเกตการเปลี่ยนแปลงข้อมูล | | provide / inject | แชร์ข้อมูลระหว่าง ancestor–descendant | | Lifecycle hooks: created, mounted, updated, unmounted, ฯลฯ | จุดต่อชีวิต component |

export default {
  data() { return { count: 0 }; },
  computed: { double: (ctx) => ctx.count * 2 },
  methods: { inc() { this.count++ } },
  mounted() { console.log('mounted') }
}

3. Composition API (หลักใน Vue 3)

3.1 Reactive core

| ฟังก์ชัน | คำอธิบาย | ||| | ref(value) | สร้าง reactive primitive | | reactive(obj) | สร้าง reactive object | | readonly(obj) | สร้าง state ที่อ่านได้อย่างเดียว | | toRef(obj, key) / toRefs(obj) | แปลง property ใน reactive ให้เป็น ref | | shallowRef, shallowReactive | reactive แบบตื้น |

3.2 Derived & Effect

| ฟังก์ชัน | คำอธิบาย | ||| | computed(fn) | สร้าง computed value | | watch(source, cb, options?) | สังเกต source เปลี่ยนแปลง | | watchEffect(fn, options?) | รัน effect ทันทีแล้วติดตาม dependency อัตโนมัติ |

import { ref, reactive, computed, watch } from 'vue';
const count = ref(0);
const state = reactive({ name: 'Vue' });
const double = computed(() => count.value * 2);
watch(count, (newVal, oldVal) => console.log(newVal));

4. Lifecycle Hooks (Composition)

| Hook | เมื่อไหร่ที่เรียก | ||| | onBeforeMount | ก่อน mount | | onMounted | หลัง mount | | onBeforeUpdate | ก่อน update | | onUpdated | หลัง update | | onBeforeUnmount | ก่อน unmount | | onUnmounted | หลัง unmount | | onErrorCaptured | เมื่อเกิด error ใน child |

import { onMounted, onUnmounted } from 'vue';
onMounted(() => console.log('mounted'));
onUnmounted(() => console.log('cleanup'));

5. Provide / Inject

• provide (ใน ancestor)
• inject (ใน descendant)

// Provider
import { provide } from 'vue';
provide('theme', ref('dark'));

// Consumer
import { inject } from 'vue';
const theme = inject('theme', ref('light'));

6. Component API

| ฟังก์ชัน | คำอธิบาย | ||| | defineAsyncComponent(loader) | สร้าง async component | | h(type, props, children) | สร้าง VNode ด้วยโค้ด | | mergeProps(a, b) | รวม props หลายแหล่ง | | useAttrs(), useSlots(), useListeners() | ดึง attributes / slots / listeners |

7. Directive API

• Built-in: v-if, v-for, v-show, v-model, v-slot
• สร้าง custom:

  import { Directive } from 'vue';
  const vFocus: Directive = {
    mounted(el) { el.focus(); }
  };
  export default vFocus;

8. Special <script setup> Macros

| Macro | คำอธิบาย | ||| | defineProps<Type>() | ประกาศ props แบบ TS | | defineEmits<Type>() | ประกาศ events | | withDefaults() | กำหนดค่า default ให้ props |

<script setup lang="ts">
const props = defineProps<{ msg: string }>();
const emit = defineEmits<['close']>();
</script>

9. Built-in Components & Features

• <Teleport> ย้าย DOM ไปยัง container อื่น
• <Suspense> รอ async dependencies
• <Transition> / <TransitionGroup> จัดแอนิเมชัน

10. สรุปแยกตามกลุ่มการใช้งาน

| กลุ่ม | ตัวอย่าง API | ||| | สร้าง–จัดการแอป | createApp, mount, nextTick | | State & Reactivity | ref, reactive, computed, watch | | Component | defineComponent, defineAsyncComponent, h | | Lifecycle | onMounted, onUpdated, onUnmounted | | Dependency Injection | provide, inject | | Directives | v-model, custom directive | | <script setup> | defineProps, defineEmits | | Built-in Components | <Teleport>, <Suspense> |