【Vue3】Vue3中的OptionsAPI与CompositionAPI

---

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>

优缺点:

1. 条例清晰,相同的放在相同的地方。如果项目小，功能简单问题不大。但是项目一旦大，功能复杂，就会出现高耦合，低内聚的场面了。
2. 当前页需要调用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>

优点:

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

对比

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

总结

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

✨$踩坑不易，还希望各位大佬支持一下$

📃 $个人主页：$ 沉默小管

📃 $个人网站：$ 沉默小管

📃 $个人导航网站：$ 沉默小管导航网

📃 $我的开源项目：$ vueCms.cn

🔥 $技术交流QQ群：837051545$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教