Vue 3 Composition API：完整指南与真实模式

Vue 3 Composition API

Composition API 按逻辑关注点组织代码。

ref 和 reactive

const count = ref(0)
count.value++
const state = reactive({ user: null })
state.user = { name: 'Alice' }

组合式函数（Composables）

export function useFetch(url) {
  const data = ref(null)
  watchEffect(async () => {
    const res = await fetch(toValue(url))
    data.value = await res.json()
  })
  return { data }
}

script setup

<script setup lang="ts">
const props = withDefaults(defineProps<{ title: string }>(), {})
const emit = defineEmits<{ close: [] }>()
</script>

-> 使用 JSON Viewer 格式化配置。