Vue3 核心指南

Vue 3 带来了全新的 Composition API，让组件逻辑的组织方式发生了根本性变化。相比 Options API，它更灵活、更易复用。

为什么需要 Composition API

在 Vue 2 中，当组件变得复杂时，相关的逻辑会分散在 data、methods、computed 等不同选项中，难以维护。Composition API 让你可以将同一功能的代码写在一起。

初识 setup

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

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

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

<template>
  <button @click="increment">
    Count: {{ count }}, Double: {{ double }}
  </button>
</template>

<script setup> 是 Vue 3 推荐的语法糖，代码更简洁，无需手动 return。

响应式核心

Vue 3 使用 Proxy 实现响应式，替代了 Vue 2 的 Object.defineProperty。这意味着：

• 可以直接监听数组索引和 length 变化
• 可以监听对象属性的添加和删除
• 性能更好，内存占用更低

小结

Composition API 不是要替代 Options API，两者可以共存。对于小项目，Options API 依然好用；对于中大型项目或需要逻辑复用的场景，Composition API 更胜一筹。