什么是Vue3的组合式API？

一、前言

马上2202年了，距离vue3.0正式版发布也已经一年多了，今年上半年没怎么关注vue3，下半年才开始正式的学习了解vue3，也尝试着去写了几个vue3项目，自己的vue3后台模板目前也在搭建中。在实际写项目的同时也踩了不少的坑。踩坑的时候想着解决了这个问题一定要发篇文章总结一下，解决完了就又懒忘的干干净净。所以这次下定决心开启vue3的系列文章，用于自己的归纳总结和学习。 这里我提前说明我基于自己的理解尽量的将要讲的东西给大家说明白，如有哪里有误也希望大家体谅并给予指正，万分感谢各位老爷！！！

二、什么是组合式API

首先想想我们在vue2写 Options Api组件的时候我们会怎么写，首先我们会新建一个.vue的组件，大概格式是下面这样

<template>

</template>

<script>
export default {
  name: "test",
  components:{ },
  data(){
    return{

    }
  },
  created() { 
  
  },
  mounted() { 
  
  },
  methods:{
  
  },
  computed:{

  },
  watch:{ }
}
</script>

<style scoped>

</style>
复制代码

然后我们会通过data created mounted methods computed等生命周期及组件选项来进行我们的业务逻辑编写，如果我们的业务逻辑较为单一整页代码行数不超过200行，这种方式比较适合也便于阅读和理解。

但是！但是！但是！但凡单个组件涉及的的功能过多，代码行数成千上万，Options Api这种模式就是噩梦，这个我真的是深有体会啊，今年九月同事离职把他的项目交接给我，单个.vue页面js部分代码行数就有6343行，光一个data就1000行，找方法找变量来来回回的翻，一个页面同时开三个窗口找方法找变量，这其中的痛苦...唉 差点就要提桶跑路了，要不是为了钱梦想 哼哼

这里我贴图为证,加上HTML CSS代码行数超一万行了...

这里我们引用一张vue官方的示例图片，不同的逻辑关注点按颜色进行标注

这个时候我们是不是就可以想 如果能把相关的代码逻辑集中管理起来是不是就会好很多，这个问题呢尤大已经帮我们考虑到了，就有了现在大家看到的组合式API，也就是平常说的setup或者说composition API，这里我引用一张掘金大帅老猿做的动画演示，# 做了一夜动画，就为让大家更好的理解Vue3的Composition Api 这样是不是就直观了很多呢

​

我们现在知道了原因接下来就要知道怎么用，这里我们可以看下一节#vue3的setup还能这么用？

是不是以为结束了？no no no，让我在补充两句，最后两句捂头

下面仅代表个人观点，如持不同观点欢迎评论区指出

大家注意在vue3里兼容vue2，也就是说Composition Api兼容Options Api的写法，什么意思呢，就是说不是我用了vue3写项目就在用不了vue2的写法了，除了一些vue3删除的API用不了，其余都向下兼容。

也就是说我可以这么写，但这种写法非常不推荐，建议还是纯粹些

<script>
import {defineComponent} from "vue";
export default defineComponent({
  name: "test",
  components:{ },
  data(){
    return{}
  },
  
  setup(){
    
  },
  created() { },
  mounted() { },
  methods:{ },
  computed:{},
})
</script>
复制代码

Options Api也不是全无优点，少量逻辑代码时非常便于阅读和理解。所以我个人认为在实际写项目的过程中不要为了Composition Api而Composition Api，可以根据实际的业务要求去选择适用的技术

写在最后

感谢您的阅读~~~