Vue3组合式API实战指南与最佳实践

1. Vue3组合式API深度解析

Vue3的组合式API彻底改变了我们编写Vue组件的方式。作为一名长期使用Vue2的开发者，我最初对这种新范式也感到不适应，但经过多个项目的实战后，发现它确实能带来更好的代码组织和复用性。

1.1 setup选项的实战要点

setup是组合式API的核心入口，它的执行时机比beforeCreate还要早。这意味着在setup中：

• 无法访问this（因为组件实例尚未创建）
• 所有需要模板使用的数据和函数都必须return

javascript复制<script>
export default {
  setup() {
    const message = 'Hello Vue3'
    const logMessage = () => {
      console.log(message)
    }
    
    return {
      message,
      logMessage
    }
  }
}
</script>

实际开发中，我强烈推荐使用<script setup>语法糖。它不仅消除了return的样板代码，还能获得更好的类型推断（对TypeScript支持更友好）。

1.2 reactive与ref的选用策略

reactive最适合处理对象类型的响应式数据：

javascript复制import { reactive } from 'vue'

const state = reactive({
  user: {
    name: '张三',
    age: 25
  },
  permissions: ['read', 'write']
})

ref则更通用，能处理任何类型的数据：

javascript复制import { ref } from 'vue'

const count = ref(0)
const user = ref({ name: '李四' })

经验法则：当确定数据会是对象形式时用reactive，其他情况用ref。在组合式函数中返回响应式数据时，统一使用ref可以避免解构丢失响应性的问题。

2. 计算属性与侦听器实战技巧

2.1 comp