VUE3组合式和选项式

OptionsAPI

中文名:选项式API通过定义methods,computed,watch,data等属性方法，处理页面逻辑。以下是OptionsAPI代码结构

实例代码:

<script lang="ts">
    // js或者ts
    import { defineComponent } from 'vue'

    export default defineComponent({
        // 启用了类型推导
        data(){
            return{
                name:"我是选项式API",
                otherName:"我是选项式API 另一个值",
            }
        },
        mounted() {
            this.handleTest()
            this.handleTest2()
        },
        methods:{
            handleTest(){
                console.log(this.name)
            },

            handleTest2(){
                console.log(this.otherName)
            }
        }
    })
</script>

优缺点:

条例清晰,相同的放在相同的地方。如果项目小，功能简单问题不大。但是项目一旦大，功能复杂，就会出现高耦合，低内聚的场面了。
当前页需要调用this去获取方法或属性。如果逻辑一复杂，就会出现指向不明等问题。
CompositionAPI
中文名:组合式API把一个功能所以顶的所有API汇集到一起，更加符合高内聚，低耦合的编程思想。即使项目再大，功能再复杂，都能快速定位这个功能的所有API。以下是CompositionAPI代码结构

实例代码:

<script setup lang="ts">
    import {ref} from "vue"
    let name = ref("我是组合式API")
    
    const handleTest = () => {
        console.log(name.value)
    }

    let otherName = ref("我是组合式API 另一个值")
    const handleTest2 = () => {
        console.log(otherName.value)
    }
</script>

优点:

有更好的逻辑复用：组合函数来实现更加简洁高效的逻辑复用
更灵活的代码组织
更好的类型推导：支持使用Typescript,组合式 API 重写的代码可以享受到完整的类型推导，不需要书写太多类型标注
更小的生产包体积：搭配

对比

从以下图片可以看出，CompositionAPI(组合式API) 代码一目了然，功能一块的划分。如果要修改或者修复bug，能更快的查找和修复。所以推荐使用组合式API 写法。

总结VUE3.0使用组合式API
在逻辑组织和逻辑复用方面，Composition API是优于Options API
Composition API几乎是函数，会有更好的类型推断
Composition API对 tree-shaking 友好，代码也更容易压缩
Composition API中没有对this的使用，减少了this指向不明的情况