Vue 3 Reactivity Transform ในปี 2026: $ref, $computed และคำถามสัมภาษณ์งาน

import { ref, computed } from 'vue'

// วิธีการมาตรฐานกับ .value
const count = ref(0)
const doubled = computed(() => count.value * 2)

function increment() {
  count.value++
  console.log(doubled.value)
}

// กับ Reactivity Transform (deprecated)
let count = $ref(0)
const doubled = $computed(() => count * 2)

function increment() {
  count++
  console.log(doubled)
}

// Source code กับ $ref
let username = $ref('')
let isValid = $computed(() => username.length >= 3)

function updateUsername(value: string) {
  username = value
}

// ผลลัพธ์หลังจาก compiler transform
import { ref, computed } from 'vue'

const username = ref('')
const isValid = computed(() => username.value.length >= 3)

function updateUsername(value: string) {
  username.value = value
}

import { watch } from 'vue'

let count = $ref(0)

// ใช้ $$ เพื่อรับ ref object
watch($$(count), (newVal, oldVal) => {
  console.log(`Count เปลี่ยนจาก ${oldVal} เป็น ${newVal}`)
})

// ส่ง ref ไปยัง composable
function useDoubled(countRef: Ref<number>) {
  return computed(() => countRef.value * 2)
}

const doubled = useDoubled($$(count))

<script setup lang="ts">
// Vue 3.5+ reactive props destructure
const { count = 0, title } = defineProps<{
  count?: number
  title: string
}>()

// count และ title ยังคง reactive
const doubled = computed(() => count * 2)
</script>

<template>
  <h1>{{ title }}</h1>
  <p>Count: {{ count }}, Doubled: {{ doubled }}</p>
</template>

const props = defineProps<{ count: number }>()
const { count } = toRefs(props) // จำเป็นเพื่อรักษา reactivity

import Vue from '@vitejs/plugin-vue'
import VueMacros from 'unplugin-vue-macros/vite'

export default defineConfig({
  plugins: [
    VueMacros({
      plugins: {
        vue: Vue(),
      },
    }),
  ],
})

<script setup lang="ts">
// กับ Vue Macros
let count = $ref(0)
let items = $ref<string[]>([])

const total = $computed(() => items.length)
const isEmpty = $computed(() => total === 0)

function addItem(item: string) {
  items = [...items, item]
  count++
}
</script>

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

// หลักการตั้งชื่อ: ใช้ suffix Ref เพื่อความชัดเจน
const countRef = ref(0)
const itemsRef = ref<string[]>([])

// Computed properties
const total = computed(() => itemsRef.value.length)
const isEmpty = computed(() => total.value === 0)

// Composable กับ reactive state
function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  const increment = () => count.value++
  const decrement = () => count.value--
  const reset = () => count.value = initialValue
  
  return {
    count,
    increment,
    decrement,
    reset
  }
}

const { count, increment, decrement } = useCounter(10)
</script>

import { ref, reactive, toRefs } from 'vue'

// ref: สำหรับ primitive values และ single values
const count = ref(0)
const name = ref('Vue')
const isLoading = ref(false)

// reactive: สำหรับ objects ที่มีหลาย properties
const state = reactive({
  user: null as User | null,
  posts: [] as Post[],
  pagination: {
    page: 1,
    perPage: 10
  }
})

// Destructure reactive object ด้วย toRefs
const { user, posts } = toRefs(state)

// ข้อดีของ ref:
// 1. สามารถ reassign ได้ทั้งหมด
// 2. สามารถส่งไปยัง functions โดยไม่สูญเสีย reactivity
// 3. คาดเดาได้มากกว่ากับ TypeScript

// ข้อดีของ reactive:
// 1. ไม่ต้องใช้ .value สำหรับ nested access
// 2. เป็นธรรมชาติมากกว่าสำหรับ complex state objects
// 3. Automatic unwrapping ใน template

import { customRef } from 'vue'

function useDebouncedRef<T>(value: T, delay = 300) {
  let timeout: ReturnType<typeof setTimeout>
  
  return customRef<T>((track, trigger) => ({
    get() {
      track()
      return value
    },
    set(newValue: T) {
      clearTimeout(timeout)
      timeout = setTimeout(() => {
        value = newValue
        trigger()
      }, delay)
    }
  }))
}

// การใช้งาน
const searchQuery = useDebouncedRef('', 500)

import { shallowRef, shallowReactive, triggerRef } from 'vue'

// shallowRef: เฉพาะ level แรกที่เป็น reactive
const largeList = shallowRef<Item[]>([])

function updateList(items: Item[]) {
  largeList.value = items // Triggers update
}

function mutateItem(index: number) {
  largeList.value[index].name = 'Updated'
  triggerRef(largeList) // ต้อง trigger แบบ manual
}

// shallowReactive: เฉพาะ properties level แรกที่เป็น reactive
const config = shallowReactive({
  theme: 'dark',
  settings: { /* nested ไม่ reactive */ }
})

// คำถาม: แก้โค้ดนี้ให้ reactive
const state = reactive({ count: 0, name: 'Vue' })
const { count, name } = state // ไม่ reactive!

// คำตอบ:
import { toRefs } from 'vue'
const state = reactive({ count: 0, name: 'Vue' })
const { count, name } = toRefs(state) // ตอนนี้ reactive แล้ว

// หรือใช้ computed สำหรับ derived values
const count = computed(() => state.count)

import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(value: string) {
    const parts = value.split(' ')
    firstName.value = parts[0] || ''
    lastName.value = parts.slice(1).join(' ') || ''
  }
})

// การใช้งาน
fullName.value = 'Jane Smith' // firstName = 'Jane', lastName = 'Smith'