Vue 3 组合式 API 入门指南

Vue 2 中我们习惯使用选项式 API 来组织和管理组件的逻辑。然而，Vue 3引入了一种全新的组合式API，为我们带来了更灵活和强大的组件设计方式。

Vue 官方文档（API 参考 | Vue.js）：

书接上回，聊完选项式 API ，相信你已经对 Vue 已经有了初步了解，本文将继续对比选项式API与组合式API，探讨组合式API的特性和用法，帮助大家更好地理解和应用Vue 3。

前言：选项式 API

在Vue 2中，我们习惯使用选项式API来定义组件，data、methods、computed等选项对初学者十分友好，通过这些选项我们可以组织和管理组件的状态和行为。

举个栗子🌰：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="add">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    add() {
      this.count += 1 ;
    }
  }
};
</script>

这里我们用Vue2的选项式API定义了一个demo，当点击按钮时，count自增1。用 Options API 的写法就是在data声明数据count，在methods声明add方法。对新手小白来说，这种写法确实直观明了。

引入组合式 API

我们知道大项目开发中，会涉及非常多的组件和页面，那么如果使用的式是选项式API，那么每次用到数据时，都需要先敲一个data，用到方法的时候就要敲一个methods。这样每个页面又要重复敲，一定会造成代码重复。那么Vue的设计师们就想到了一个办法，能不能实现原生JS的那种形式，我要用到什么就直接声明，不用写在data里面，而是直接写在最外面的script？

于是就诞生了组合式API（Composition API），它提供了更灵活的代码组织方式。通过组合式API，我们可以更自由地组织和重用逻辑，而不再受限于选项式API的结构。

就拿上述计数器的例子：

在Vue 3中，我们将使用setup函数来替代Vue 2的data和methods选项：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="add">+1</button>
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);

    function add() {
      count.value += 1;
    }

    return {
      count,
      add
    };
  }
};
</script>

在这里，我们使用了ref函数来声明响应式状态（count），而setup函数返回了我们希望在组件中使用的变量和方法。

setup语法还有一种更简化的写法：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="add">+1</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);

function add() {
   count.value += 1;
}
</script>

Vue 3 的 <script setup> 语法糖允许我们直接在script标签中添加setup后缀。这种写法中不需要我们再使用 setup 函数，而是直接在 <script setup> 内部定义变量、函数等，这些定义会自动被包装成 setup 函数。

组合式API的优势

1. 更清晰的逻辑组织： setup函数使得我们可以将相关的逻辑代码组织在一起，使组件更易于理解和维护。
2. 更灵活的数据处理： 可以直接在setup函数中进行数据处理，而不需要拆分到data和methods选项中。
3. 更好的类型推断： 在TypeScript等静态类型语言中，组合式API提供了更好的类型推断支持，使得代码更加健壮。

组合式API的一些 特性

1. setup 函数

组合式 API 的核心是 setup 函数。在组件的生命周期钩子函数执行之前，setup 函数会被调用。

2. 响应式数据

在 setup 函数中，通过使用 ref、reactive 等函数来声明响应式数据，而在选项式 API 中，需要将数据声明在 data 中。

// 选项式 API
data() {
  return {
    count: 0
  };
}

// 组合式 API
import { ref } from 'vue';
const count = ref(0);

3. 组件状态

组合式 API 中的函数和变量直接暴露给模板，而无需返回一个对象。这样，组件状态的定义更为直观，无需将方法放在 methods 中。

// 选项式 API
methods: {
  add() {
    this.count += 1;
  }
}
  
// 组合式 API
const add = () => {
  count.value += 1;
}; 

4. 生命周期钩子

在 setup 函数中，你可以使用 onMounted、onUpdated、onUnmounted 等函数来声明组件的生命周期钩子，而不再需要将它们放在 methods 中。

// 选项式 API
mounted() {
    console.log('mounted');
}

// 组合式 API
import { onMounted } from 'vue';
onMounted(() => {
    console.log('mounted');
});

5. computed 和 watch

通过 computed 和 watch 函数，可以在 setup 函数中声明。

// 组合式 API
import { computed, watch } from 'vue';

const doubleCount = computed(() => count.value * 2);

watch(count, (newValue, oldValue) => {
  console.log(oldValue,newValue);
});

// 选项式 API
computed: {
  doubleCount() {
    return this.count * 2;
  }
},
watch: {
  count(newValue, oldValue) {
    console.log(oldValue,newValue);
  }
}

最后

以上是组合式 API 的一些主要特性和用法。总体来说，组合式 API 相较于选项式 API 逻辑更为灵活、清晰，更接近于原生 JS ，不再需要通过 this 来访问数据和方法，更符合 JS 开发者的思维习惯。许多公司的项目也已经从 Vue2 向 Vue3 变迁。

看到这里相信你对组合式 API 已经有了初步的了解，以上特性只是 Vue3 组合式 API 的冰山一角，建议大家结合官方文档（API 参考 | Vue.js）继续深入学习，通过不断学习和实践，你将更加熟练地面试与项目。

已将学习代码上传至 github，欢迎大家学习指正！

技术小白记录学习过程，有错误或不解的地方还请评论区留言，如果这篇文章对你有所帮助请 "点赞 收藏+关注" ，感谢支持！！