Vue 3 Reactivity Transform 2026：$ref、$computed とインタビュー対策

// Reactivity Transform を使用した場合（廃止された構文）
<script setup>
let count = $ref(0)
let doubled = $computed(() => count * 2)

function increment() {
  count++
}
</script>

<template>
  <button @click="increment">Count: {{ count }}</button>
  <p>Doubled: {{ doubled }}</p>
</template>

// コンパイル後の実際のコード
<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Count: {{ count }}</button>
  <p>Doubled: {{ doubled }}</p>
</template>

// 問題: どちらがリアクティブか一目で分からない
let count = $ref(0)     // リアクティブ
let total = 0           // 非リアクティブ

function update() {
  count++  // UIが更新される
  total++  // UIが更新されない
}

// TypeScriptとの統合問題
let items = $ref<string[]>([])

// 以下のような操作で型エラーが発生することがあった
items.push('new item')  // 型推論が正しく機能しないケース

// リアクティビティ喪失の例
let count = $ref(0)

function useCounter(c) {
  // cはここで既にプリミティブ値
  console.log(c)  // 0
}

useCounter(count)  // リアクティビティが失われる

// $$マクロを使用した回避策
useCounter($$(count))  // refとして渡される

<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Count: {{ count }}</button>
  <p>Doubled: {{ doubled }}</p>
</template>

import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const doubled = computed(() => count.value * 2)
  const isEven = computed(() => count.value % 2 === 0)

  function increment() {
    count.value++
  }

  function decrement() {
    count.value--
  }

  function reset() {
    count.value = initialValue
  }

  return {
    count,
    doubled,
    isEven,
    increment,
    decrement,
    reset
  }
}

<script setup>
import { reactive, toRefs } from 'vue'

const state = reactive({
  firstName: '',
  lastName: '',
  email: ''
})

const { firstName, lastName, email } = toRefs(state)

const fullName = computed(() => `${firstName.value} ${lastName.value}`)
</script>

import { ref, reactive, isRef, isReactive } from 'vue'

// refはプリミティブ値をラップ
const count = ref(0)
console.log(isRef(count))  // true
console.log(count.value)   // 0

// reactiveはオブジェクトをプロキシでラップ
const state = reactive({ count: 0 })
console.log(isReactive(state))  // true
console.log(state.count)        // 0（.valueは不要）

// reactiveの注意点
const { count: destructuredCount } = state  // リアクティビティ喪失

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

// refは深いリアクティビティを提供
const deepRef = ref({ nested: { value: 1 } })
deepRef.value.nested.value = 2  // 変更が検知される

// shallowRefは浅いリアクティビティのみ
const shallow = shallowRef({ nested: { value: 1 } })
shallow.value.nested.value = 2  // 変更は検知されない
shallow.value = { nested: { value: 2 } }  // 全体の置き換えは検知される

// 手動でトリガーする場合
shallow.value.nested.value = 3
triggerRef(shallow)  // 明示的に更新を通知

import { ref, watch, watchEffect } from 'vue'

const searchQuery = ref('')
const results = ref([])

// watchEffect: 依存関係を自動追跡
watchEffect(async () => {
  // searchQueryの変更で自動的に再実行
  if (searchQuery.value.length > 2) {
    results.value = await fetchResults(searchQuery.value)
  }
})

// watch: 明示的な依存関係指定
watch(searchQuery, async (newValue, oldValue) => {
  console.log(`Changed from ${oldValue} to ${newValue}`)
  if (newValue.length > 2) {
    results.value = await fetchResults(newValue)
  }
}, { immediate: false, deep: false })

// 複数のソースを監視
watch(
  [searchQuery, () => state.filter],
  ([newQuery, newFilter], [oldQuery, oldFilter]) => {
    // 両方の変更に反応
  }
)

import { customRef } from 'vue'

// デバウンス付きのref実装
function useDebouncedRef<T>(value: T, delay = 300) {
  let timeout: ReturnType<typeof setTimeout>
  
  return customRef<T>((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue: T) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}

// 使用例
const searchInput = useDebouncedRef('', 500)

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

const state = reactive({
  firstName: 'John',
  lastName: 'Doe',
  age: 30
})

// toRef: 単一のプロパティをrefに変換
const ageRef = toRef(state, 'age')
ageRef.value++  // state.ageも31になる

// toRefs: 全プロパティをrefsに変換
const { firstName, lastName } = toRefs(state)
firstName.value = 'Jane'  // state.firstNameも'Jane'になる

// Composableでの活用
function useUserState() {
  const state = reactive({ name: '', email: '' })
  return toRefs(state)  // 分割代入してもリアクティビティを維持
}

<script setup>
// Vue 3.5以降: 分割代入してもリアクティブ
const { title, count = 0 } = defineProps<{
  title: string
  count?: number
}>()

// watchで監視可能
watch(() => count, (newVal) => {
  console.log('count changed:', newVal)
})
</script>

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

<script setup>
import { useTemplateRef, onMounted } from 'vue'

const inputRef = useTemplateRef('input')

onMounted(() => {
  inputRef.value?.focus()
})
</script>

<template>
  <input ref="input" type="text" />
</template>

import { shallowRef, shallowReactive, markRaw, computed } from 'vue'

// 大きなリストにはshallowRefを使用
const largeList = shallowRef<Item[]>([])

// 変更不要なオブジェクトはmarkRawでラップ
const config = markRaw({
  apiUrl: 'https://api.example.com',
  timeout: 5000
})

// computedのキャッシュを活用
const expensiveComputed = computed(() => {
  // 依存する値が変わらない限り再計算されない
  return largeList.value.filter(item => item.active).length
})

// 不必要なリアクティビティを避ける
const staticData = {
  labels: ['A', 'B', 'C'],  // 変更されないデータ
  constants: Object.freeze({ MAX: 100 })
}