Vue 组合式 API 和 选项式 API 比较 - 2.x 与 3.x 版本差异

Vue 的组合式 API 和选项式 API 是两种不同的方式来编写 Vue 组件。

选项式 API 是 Vue 2.x 版本中最常用的 API，它使用一个对象来描述组件的选项。这些选项包括数据、计算属性、方法、生命周期钩子等等。

例如：

<script>
export default {
  data() {
    return {
      message: 'Hello world!'
    }
  },
  methods: {
    handleClick() {
      console.log('Button clicked!')
    }
  }
}
</script>

组合式 API 是 Vue 3.x 版本中引入的一种新的 API，它基于函数式 API 的思想，将组件内部的逻辑拆分成更小的函数。每个函数都只关注一个特定的功能，可以重复使用，也可以在其他组件中使用。

例如：

<script>
import { reactive, onMounted } from 'vue'

export default {
  setup() {
    const state = reactive({
      message: 'Hello world!'
    })

    const handleClick = () => {
      console.log('Button clicked!')
    }

    onMounted(() => {
      console.log('Component mounted!')
    })

    return {
      state,
      handleClick
    }
  }
}
</script>

可以看出，组合式 API 使用了一些新的函数，如 reactive、onMounted 等，它们可以让我们更方便地编写组件逻辑，使代码更加简洁和易于维护。