Vue 3 Reactivity Transform trong 2026: $ref, $computed và Câu hỏi Phỏng vấn

import { ref, computed } from 'vue'

// Cách tiếp cận chuẩn với .value
const count = ref(0)
const doubled = computed(() => count.value * 2)

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

// Với Reactivity Transform (deprecated)
let count = $ref(0)
const doubled = $computed(() => count * 2)

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

// Source code với $ref
let username = $ref('')
let isValid = $computed(() => username.length >= 3)

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

// Kết quả sau khi 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)

// Sử dụng $$ để lấy ref object
watch($$(count), (newVal, oldVal) => {
  console.log(`Count thay đổi từ ${oldVal} sang ${newVal}`)
})

// Truyền ref vào 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 và title vẫn 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) // Bắt buộc để giữ 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">
// Với 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'

// Quy ước đặt tên: sử dụng suffix Ref để rõ ràng
const countRef = ref(0)
const itemsRef = ref<string[]>([])

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

// Composable với 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: cho primitive values và single values
const count = ref(0)
const name = ref('Vue')
const isLoading = ref(false)

// reactive: cho objects với nhiều properties
const state = reactive({
  user: null as User | null,
  posts: [] as Post[],
  pagination: {
    page: 1,
    perPage: 10
  }
})

// Destructure reactive object với toRefs
const { user, posts } = toRefs(state)

// Ưu điểm của ref:
// 1. Có thể reassign hoàn toàn
// 2. Có thể truyền vào functions mà không mất reactivity
// 3. Predictable hơn với TypeScript

// Ưu điểm của reactive:
// 1. Không cần .value cho nested access
// 2. Tự nhiên hơn cho complex state objects
// 3. Automatic unwrapping trong 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)
    }
  }))
}

// Sử dụng
const searchQuery = useDebouncedRef('', 500)

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

// shallowRef: chỉ level đầu tiên là 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) // Cần trigger thủ công
}

// shallowReactive: chỉ properties level đầu tiên là reactive
const config = shallowReactive({
  theme: 'dark',
  settings: { /* nested không reactive */ }
})

// Câu hỏi: Sửa code này để nó reactive
const state = reactive({ count: 0, name: 'Vue' })
const { count, name } = state // Không reactive!

// Câu trả lời:
import { toRefs } from 'vue'
const state = reactive({ count: 0, name: 'Vue' })
const { count, name } = toRefs(state) // Bây giờ reactive

// Hoặc sử dụng computed cho 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(' ') || ''
  }
})

// Sử dụng
fullName.value = 'Jane Smith' // firstName = 'Jane', lastName = 'Smith'