开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

前言

组合式API

说起组合式API，我们第一时间想到的就是选项式API，我们通过声明选项的形式来编写vue组件。而组合式API就是一系列API的集合，我们可以通过使用不同的函数来编写组件。而它涵盖了哪些api呢？我们来具体看一下：

响应式API：像ref()和reactive()，通过这两个声明的数据，我们就能快速的创建响应式状态、侦听器以及计算属性。
生命周期钩子：像onMounted()和onUnmounted(),让我们可以在组件的不同的生周期阶段添加逻辑。

依赖注入：像provide()和inject()，让我们可以在组件跨级别进行数据传输。

而我们想要愉快的使用组合式API就要使用vue3或vue2.7 版本了，如果想要在vue2版本中使用组合式API的话，就要使用官方提供的@vue/composition-api插件。在vue3中使用组合式api我们一般都会配合<script setup>语法一起使用，我们可以通过如下小示例体验下组合式api：

<script setup>
import { ref, onMounted } from 'vue'

// 响应式的状态
const num = ref(0)

// 更改状态、触发更新的函数
const add = () => {
  num.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`初始值为 ${num.value}。`)
})
</script>

<template>
  <button @click="add">当前值：{{ num }} </button>
</template>

和React Hooks对比

想必了解React Hooks的同学，都会觉得这个组合式API很相似。但其实二者还是有些明显的区别的。

React Hooks 会在每次组件更新的时候，都会重新调用。这也会导致我们会遇到很多奇葩的问题，并且这也会带来想要的性能问题。

相比起来，vue的组合式api 只会调用<script setup> 的代码一次。并更加符合JavaScript的直觉。

当然，react hooks也有很强大的地方，而组合式api的灵感来源也是react hooks。而vue也为如上说到的问题也提供了解决方法。

vue的组合式API

前言

组合式API

和React Hooks对比