Vue的组合式API和选项式API有什么区别

Vue3的组合式API（Composition API）和选项式API（Options API）是两种不同的组件编写方式，主要区别如下：

---

1. 代码组织方式

• 选项式API：
  按照选项（如data、methods、computed等）组织代码，逻辑分散在不同选项中。

  export default {
    data() {
      return { count: 0 }
    },
    methods: {
      increment() {
        this.count++
      }
    }
  }

• 组合式API：
  按照逻辑功能组织代码，相关逻辑集中在一起，便于复用和维护。

  import { ref } from 'vue'
  export default {
    setup() {
      const count = ref(0)
      const increment = () => count.value++
      return { count, increment }
    }
  }

---

2. 逻辑复用

• 选项式API：
  逻辑复用依赖mixins，容易导致命名冲突和来源不清晰。

  const myMixin = {
    data() { return { sharedData: 'value' } }
  }
  export default {
    mixins: [myMixin]
  }

• 组合式API：
  通过自定义Hook函数实现逻辑复用，清晰且灵活。

  // useCounter.js
  export function useCounter() {
    const count = ref(0)
    const increment = () => count.value++
    return { count, increment }
  }
  
  // 组件中
  import { useCounter } from './useCounter'
  export default {
    setup() {
      const { count, increment } = useCounter()
      return { count, increment }
    }
  }

---

3. 响应式数据

• 选项式API：
  数据定义在data选项中，Vue自动使其响应式。

  data() {
    return { message: 'Hello' }
  }

• 组合式API：
  使用ref或reactive显式定义响应式数据。

  import { ref, reactive } from 'vue'
  export default {
    setup() {
      const message = ref('Hello')
      const state = reactive({ name: 'Vue3' })
      return { message, state }
    }
  }

---

4. this上下文

• 选项式API：
  通过this访问数据和方法。

  methods: {
    logMessage() {
      console.log(this.message)
    }
  }

• 组合式API：
  无需this，直接访问变量和函数。

  setup() {
    const message = ref('Hello')
    const logMessage = () => console.log(message.value)
    return { message, logMessage }
  }

---

5. 适用场景

• 选项式API：
  适合简单场景或初学者，代码结构直观。
• 组合式API：
  适合复杂场景，逻辑复用和代码组织更灵活。

---

总结

• 选项式API：简单易用，适合小型项目或初学者。
• 组合式API：灵活强大，适合大型项目或需要逻辑复用的场景。

根据项目需求和个人偏好选择合适的方式即可。