选项式API和组合式API

简介

        Vue 3支持选项式API和组合式API。其中，选项式API是从Vue 2开始使用的一种写法，而Vue 3新增了组合式API的写法。

选项式API

        选项式API是一种通过包含多个选项的对象来描述组件逻辑的API，其常用的选项包括data、methods、computed、watch等。

        格式：

 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
 <script>
        const { createApp } = Vue;
        const app = createApp({
            data() {
                return { /*定义数据*/ }
            },
            methods: { /* 定义方法 */ },
            computed: {/*  定义计算属性 */ },
            watch: { /* 定义侦听器 */ }
        })
    </script>

组合式API

        相比于选项式API，组合式API是将组件中的数据、方法、计算属性、侦听器等代码全部组合在一起，写在setup()函数中。

        格式：

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp, ref } = Vue
        createApp({
            setup() {
                const 数据名 = 数据值
                const 方法名 = () => { }
                const 计算属性名 = computed(() => { })
                watch(侦听器的来源, 回调函数, 可选参数)
                return { 数据名, 方法名, 计算属性名 }
            }
        }).mount('#app')
    </script>

        Vue还提供了setup语法糖，用于简化组合式API的代码。使用setup语法糖时，组合式API的语法格式如下：

<script setup>
import { computed, watch } from 'vue'
// 定义数据
const 数据名 = 数据值
// 定义方法
const 方法名 = () => {}
// 定义计算属性
const 计算属性名 = computed(() => {})
// 定义侦听器
watch(侦听器的来源, 回调函数, 可选参数)
</script>

选项式API和组合式API的关系

        Vue提供的选项式API和组合式API这两种写法可以覆盖大部分的应用场景，它们是同一底层系统所提供的两套不同的接口。选项式API是在组合式API的基础上实现的。

        企业在开发大型项目时，随着业务复杂度的增加，代码量会不断增加。

        如果使用选项式API，整个项目逻辑不易阅读和理解，而且查找对应功能的代码会存在一定难度。

        如果使用组合式API，可以将项目的每个功能的数据、方法放到一起，这样不管项目的大小，都可以快速定位到功能区域的相关代码，便于阅读和维护。同时，组合式API可以通过函数来实现高效的逻辑复用，这种形式更加自由，需要开发者有较强的代码组织能力和拆分逻辑能力。