VUE选项式API，组合式API

选项式 API (Options API)

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

<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 函数来描述组件逻辑。

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

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