组合式API

组合式 API 通常会与<script setup>搭配使用，这个setup属性告诉vue在编译时做一些处理。组合式API是一系列API的集合，使我们使用函数不用像声明选项的方式书写Vue组件

<script setup>

import { ref, onMounted } from 'vue'

const count = ref(0)

function increment () {
  count.value++
}

onMounted(() => {
  console.log(`count1 is ${count.value}`)
})
</script>

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

• setup，关键字，书写的组件模版被编译为了一个内联函数，对代码压缩更好。是因为这种本地变量的名字可以压缩，选项式API依赖 this 上下文访问属性，对象的属性名不能压缩
• 同一组件，可以使用两种API
• • 选项式API的组件中，通过 setup() 选项来使用组合式API。迫不得已不推荐这种写法
• 组合式API更适用于大型项目，选项式API适用于中小型项目

选项式API

例如vue2的 data、methods、mounted，选项所定义的属性都会暴露在函数内部的 this 上，指向当前组件的实例

<script>
export default {
    data() {
        return {}
    },
    methods: {},
    mounted() {},
    setup() {
        const count2 = ref(0)
        function increment2 () {
          count2.value++
        }
        return {  // 每一个状态和方法都需要暴露出去--繁琐，不如<script setup>简便
          count2,
          increment2
        }
    }
}
</script>