Vue 选项式 API（Options API）与组合式 API（Composition API）的区别与写法对照

<script>
export default {
  data() {
    return {
      count: 0,
      step: 1
    }
  },
  computed: {
    double() {
      return this.count * this.step
    }
  },
  methods: {
    add() {
      this.count += this.step
    }
  },
  mounted() {
    console.log('mounted, count =', this.count)
  }
}
</script>

<template>
  <button @click="add">{{ count }} / {{ double }}</button>
</template>

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

const count = ref(0)
const step = ref(1)

const double = computed(() => count.value * step.value)

function add() {
  count.value += step.value
}

onMounted(() => {
  console.log('mounted, count =', count.value)
})
</script>

<template>
  <button @click="add">{{ count }} / {{ double }}</button>
</template>

export default {
  // ✅ data 必须是函数：每个组件实例拿到独立的一份数据
  data() {
    return { count: 0 }
  }
  // ❌ 写成对象会让所有实例共享同一份数据
  // data: { count: 0 }
}

import { ref, reactive } from 'vue'

// 基本类型用 ref（数字、字符串、布尔、数组也可以）
const count = ref(0)
count.value++                       // 脚本里必须 .value

// 对象用 reactive，属性访问不用 .value
const form = reactive({ name: '', age: 0 })
form.name = 'tom'                   // ✅
form = reactive({ name: 'x' })      // ❌ let 声明的变量整体替换会断掉响应性

// 需要整体替换的对象，用 ref 包一层
const form2 = ref({ name: '', age: 0 })
form2.value = { name: 'x', age: 1 } // ✅ 替换的是 .value，引用链没断

// 选项式：只读
export default {
  computed: {
    double() {
      return this.count * 2
    }
  }
}

// 选项式：可写
export default {
  computed: {
    fullName: {
      get() { return this.first + ' ' + this.last },
      set(val) {
        const [f, l] = val.split(' ')
        this.first = f
        this.last = l
      }
    }
  }
}

// 组合式：只读
import { computed } from 'vue'
const double = computed(() => count.value * 2)

// 组合式：可写
const fullName = computed({
  get: () => first.value + ' ' + last.value,
  set(val) {
    const [f, l] = val.split(' ')
    first.value = f
    last.value = l
  }
})

// 选项式
export default {
  watch: {
    // 简写，只关心变化后
    keyword(newVal, oldVal) {
      this.search(newVal)
    },
    // 支持点路径字符串
    'form.age'(newVal) {
      console.log('age 变了', newVal)
    },
    // 完整写法，配置 immediate / deep
    list: {
      handler(newVal) { console.log(newVal) },
      immediate: true,
      deep: true
    }
  }
}

// 组合式
import { watch, watchEffect, ref, reactive } from 'vue'

const keyword = ref('')
const form = reactive({ age: 0 })
const list = ref([])

// 侦听 ref：直接传
watch(keyword, (newVal, oldVal) => { search(newVal) })

// 侦听 reactive 的某个属性：必须用 getter 包一层
watch(() => form.age, (newVal) => { console.log('age 变了', newVal) })
// watch(form.age, ...) ❌ 传进去的是普通值，不是响应式来源，不会触发

// 侦听整个 reactive 对象：隐式 deep，且 newVal === oldVal
watch(form, () => { console.log('form 变了') })

// 多来源
watch([keyword, () => form.age], ([nk, na], [ok, oa]) => { /* ... */ })

// 配置项
watch(keyword, handler, { immediate: true, deep: true, flush: 'post' })

// 不清来源，自动收集依赖，立即执行一次
watchEffect(() => {
  console.log('依赖变化了：', keyword.value, form.age)
})

watch(keyword, (kw, _, onCleanup) => {
  const timer = setTimeout(() => fetchResult(kw), 300)
  onCleanup(() => clearTimeout(timer))   // 下次触发或组件卸载时调用
})

// 选项式：写成同名方法
export default {
  beforeCreate() {},
  created() {},
  mounted() {},
  beforeUnmount() {},
  unmounted() {}
}

// 组合式：从 vue 导入，在 setup 中注册
import {
  onBeforeMount, onMounted,
  onBeforeUpdate, onUpdated,
  onBeforeUnmount, onUnmounted,
  onActivated, onDeactivated,
  onErrorCaptured, nextTick
} from 'vue'

onMounted(() => { /* DOM 已就绪 */ })
onBeforeUnmount(() => { /* 此时 DOM 还在，适合清理定时器、解绑监听 */ })

// 选项式
export default {
  props: {
    title: { type: String, required: true },
    count: { type: Number, default: 0 }
  },
  emits: ['change', 'update'],
  methods: {
    handle() {
      this.$emit('change', this.count + 1)
    }
  }
}

<!-- 组合式：defineProps / defineEmits 是编译宏，不需要 import -->
<script setup>
const props = defineProps({
  title: { type: String, required: true },
  count: { type: Number, default: 0 }
})
const emit = defineEmits(['change', 'update'])

function handle() {
  emit('change', props.count + 1)
}
</script>

<script setup lang="ts">
// 类型声明式（3.0+）
const props = defineProps<{ title: string; count?: number }>()
const emit = defineEmits<{ (e: 'change', value: number): void }>()

// 3.3+ 更简洁的具名元组写法
const emit2 = defineEmits<{ change: [value: number] }>()

// 类型声明下没有运行时默认值，用 withDefaults 补
const props2 = withDefaults(defineProps<{ count?: number }>(), { count: 0 })
</script>

<script setup>
const props = defineProps({ count: Number })

// Vue 3.5+ ：解构出来的变量仍然是响应式的
const { count } = defineProps({ count: Number })

// Vue 3.4 及以前：解构会丢失响应性，props.count 变化后 count 不更新
// 正确做法是保留 props.count，或者用 toRef
import { toRef } from 'vue'
const count1 = toRef(props, 'count')   // ✅ 保持连接
</script>

<!-- 选项式 -->
<template>
  <input ref="input" />
</template>
<script>
export default {
  mounted() {
    this.$refs.input.focus()
  }
}
</script>

<!-- 组合式：声明一个同名 ref -->
<template>
  <input ref="input" />
</template>
<script setup>
import { ref, useTemplateRef, onMounted } from 'vue'

// 变量名必须和模板里的 ref 值一致；初始值必须是 null
const input = ref(null)
onMounted(() => input.value.focus())

// Vue 3.5+ 推荐写法：显式传模板里的 ref 名，不再强依赖变量名
const input2 = useTemplateRef('input')
</script>

// 选项式
export default {
  // ⚠️ 这样 provide 的是取值那一刻的快照，之后 this.theme 变了，后代拿不到新值
  provide() {
    return { theme: this.theme }
  },
  inject: ['theme']
}

// 需要响应式就包一层 computed
import { computed } from 'vue'
export default {
  data() { return { theme: 'dark' } },
  provide() {
    return { theme: computed(() => this.theme) }
  }
}

// 组合式
import { provide, inject, ref, readonly } from 'vue'

// 祖先组件
const theme = ref('dark')
provide('theme', theme)                  // 直接传 ref，天然响应式
// provide('theme', readonly(theme))      // 不想让后代改，包一层 readonly

// 后代组件
const theme = inject('theme', ref('light'))   // 第二个参数是找不到时的默认值

// mixins/useMouse.js
export const mouseMixin = {
  data() {
    return { x: 0, y: 0 }
  },
  mounted() {
    window.addEventListener('mousemove', this.update)
  },
  beforeUnmount() {
    window.removeEventListener('mousemove', this.update)
  },
  methods: {
    update(e) {
      this.x = e.pageX
      this.y = e.pageY
    }
  }
}

// 使用
export default {
  mixins: [mouseMixin],
  mounted() {
    console.log(this.x)   // x 从哪来的？光看这段代码看不出来
  }
}

// composables/useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  function update(e) {
    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return { x, y }
}

<script setup>
import { useMouse } from '@/composables/useMouse'

// 来源就在这一行，一眼可见；还能改名避免冲突
const { x, y } = useMouse()
const { x: chartX, y: chartY } = useMouse()
</script>