Vue的组合式API和选项式API

Vue的组合式API和选项式API是Vue的两种代码风格。

 什么是组合式api：

组合式api的组件编辑方式是Vue2.7以及Vue3以上的版本提出的全新概念，是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。

组合式api的作用：

该方式可以很轻松地将这一组代码移动到一个外部文件中，不再需要为了抽象而重新组织代码，大大降低了重构成本，这在长期维护的大型项目中非常关键。

什么是选项式API？

选项式api通过各个选项对象，data、methods、mounted等，明确告诉开发者，相应代码的位置。

下面是一个选项式API的示例

 

<script>
export default{
  data(){
    return {
       message:'选项式API',
    }
  },
  methods:{
    printmessage:function(){
        document.write('选项式API')
    }
  },
  mounted(){
    console.console.log('挂载完毕');
  
}
}

</script>

<template>
<h1>{{message}} </h1>
</template>

选项式API示例 

 

<script setup>
import {ref,onMounted} from 'vue'
const count=ref(0);
function incream(){
  count.value++;
}
onMounted(()=>{
  console.log('挂载中....');
})
</script>

<template>
<button @click="incream">{{count}}</button>
</template>

两个编码风格的比较

组合式API与选项式API的比较

代码组织方式
选项式API将组件的逻辑分散在多个选项中，如data、methods、computed等。这种方式对于小型应用来说是直观且易于管理的，但当组件逻辑变得复杂时，代码会变得混乱且难以维护。

相比之下，组合式API将组件的逻辑拆分成多个独立的函数，每个函数负责特定的功能或逻辑。这种方式使得代码更加模块化、可读性和可维护性更强。

逻辑复用性
在选项式API中，复用逻辑代码通常意味着复制和粘贴相似的代码块，并在需要的地方进行修改。这种方式不仅效率低下，而且容易导致代码冗余和错误。

而组合式API通过将逻辑代码封装成独立的函数，使得这些函数可以在多个组件中轻松复用。这不仅提高了开发效率，还降低了代码的复杂性。