选项式API VS 组合式API

Vue支持两种代码风格，选项式API和组合式API，当然两种代码风格都可以完成一样的功能，不同的是书写风格上的差异

选项式 API (Options API)

使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例

​x
<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

组合式 API (Composition API)

通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。

xxxxxxxxxx
<script setup>
import { ref, onMounted } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

两种风格区别

选项式API

1. 在 vue2.x 项目中使用的就是 选项式API 写法
2. 优点：易于学习和使用，写代码的位置已经约定好了
3. 缺点：代码组织性差，相似的逻辑代码不便于复用，逻辑复杂代码多了不好阅读

组合式API

1. 在 vue3 中使用的就是 组合API 写法
2. 优点：功能逻辑复杂繁多情况下，各个功能逻辑代码组织再一起，便于阅读和维护
3. 缺点：需要有良好的代码组织能力和拆分逻辑能力