一、Composition API概述

  1. 当我们编写Vue组件时候，组件中可能包含一系列的功能，例如一个代码仓库管理的应用，用户的仓库列表可以看做是一个组件，这个组件还包含筛选、搜索的功能。

所谓的功能我们可以理解为MVC中的Model和Controller。从视图角度，组件是最基本的代码复用单元，但是从逻辑上，功能模块是最基本的代码复用单元。

每个组件中可能包含多个功能（也称为关注点），而多个功能的代码会分散在Vue组件的各个部分：data/props/watch/computed/dom event callback/lifescycle。

这会带来两个问题：

  1. 可读性和可维护性差，比如我们想要阅读某个功能的逻辑，需要翻遍整个组件，到处查看相应的逻辑；当需要改动某个功能时候，需要在很多地方进行改动。
  2. Vue未提供功能模块级别的代码复用支持，只提供组件级别的复用的话，在大型项目中是不够的。

为了解决上面两个问题，Vue需要提供功能模块级别的代码组织方式，即需要将同一个功能模块的代码写在同一片区域，而不是分散到组件的各个API中，另外还需要支持功能模块的封装，以便我们可以提取功能模块的代码进行复用。

如何实现上述两个能力呢？我们看看一个功能模块都包含哪些内容。

  1. 数据
  2. 数据的计算
  3. 数据的更新
  4. 数据监听

其中数据部分的代码写在Vue组件中的data、props中

数据计算部分的代码写在Vue组件中的computed和处理数据的方法中

数据更新部分代码写在生命周期钩子方法和交互事件中

数据监听代码写在watch中

因此我们希望Vue能提供一个API，让我们把一个功能模块（即关注点）的这些代码（包括data/props/computed/watch/dom event callback/lifecycle）都写在一起。并且能将其提取。

组合式API就提供了这样的能力。

总之，组合式API是在Vue3中新增加的API，它有两点优势：

  1. 让功能模块代码（关注点）聚合在一起，使可读性和可维护性更高。
  2. 提供了一种功能模块级别的复用代码的方式。

二、Composition API使用

开发者如何使用组合式API呢？简单地说，需要在Vue组件里实现setup方法，并在方法中返回一些方法和属性，返回的所有内容都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

首先看一个简单的例子，下面是一个单文件组件 
  1. <template>
  2.     <div id="app">
  3.         <span class="counter">
  4.             {{counter}}
  5.             <button @click="increase">+1</button>
  6.         </span>
  8.         <div class="msg-panel">
  9.             <span v-if="showMsg">
  10.                 hello, world
  11.             </span>
  12.             <button @click="toggleShowCondition">{{showWhenOdd ? '奇数展示' : '偶数展示'}}</button>
  13.         </div>
  14.     </div>
  15. </template>
  17. <script>
  18. export default {
  19.     data() {
  20.         return {
  21.             counter: 0,
  22.             showWhenOdd: true
  23.         };
  24.     },
  25.     computed: {
  26.         showMsg() {
  27.             return this.counter % 2 === 0
  28.                 ? this.showWhenOdd
  29.                 : !this.showWhenOdd;
  30.         }
  31.     },
  32.     mounted() {
  33.         this.counter = Math.floor(Math.random() * 9) + 1;
  34.     },
  35.     methods: {
  36.         increase() {
  37.             this.counter++;
  38.         },
  39.         toggleShowCondition() {
  40.             this.showWhenOdd = !this.showWhenOdd;
  41.         }
  42.     }
  44. };
  46. </script>
  48. <style scoped>
  49. #app {
  50.     text-align: center;
  51.     margin-top: 60px;
  52. }
  54. .counter {
  55.     width: 100px;
  56.     height: 100px;
  57.     border: 1px solid;
  58.     padding: 10px;
  59. }
  61. .msg-panel {
  62.     width: 100px;
  63.     height: 100px;
  64.     margin: 50px auto;
  65.     border: 1px solid;
  66.     padding: 10px;
  67. }
  68. </style>

效果如下：

Vue Composition API（组合式API） - 图1

这个组件有两个功能

  1. 展示一个计数器，计数器初始化计数是1-10之间的一个随机数，每次点击”+1”按钮会让计数加1，计数实时展示在界面上
  2. 信息展示，仅当计数为偶数时候，才会展示”hello, world”信息。也可以通过点击”奇数展示”按钮来控制 仅当计数为奇数时候展示信息。

理解了上面的功能的实现之后我们再来看下使用组合式API如何实现相同的功能。

  1. <template>
  2.     <div id="app">
  3.         <span class="counter">
  4.             {{counter}}
  5.             <button @click="increase">+1</button>
  6.         </span>
  8.         <div class="msg-panel">
  9.             <span v-if="showMsg">
  10.                 hello, world
  11.             </span>
  12.             <button @click="toggleShowCondition">{{showWhenOdd ? '奇数展示' : '偶数展示'}}</button>
  13.         </div>
  14.     </div>
  15. </template>
  17. <script>
  18. import {ref, onMounted, computed} from 'vue';
  20. export default {
  21.     setup() {
  22.         // counter逻辑
  23.         const counter = ref(0);
  24.         const increase = () => {
  25.             counter.value++;
  26.         };
  27.         onMounted(() => {
  28.             counter.value = Math.floor(Math.random() * 9) + 1;
  29.         });
  31.         // 提示信息逻辑
  32.         const showWhenOdd = ref(true);
  33.         const showMsg = computed(() => {
  34.             return counter.value % 2 === 0
  35.                 ? showWhenOdd.value
  36.                 : !showWhenOdd.value;
  37.         });
  38.         const toggleShowCondition = () => {
  39.             showWhenOdd.value = !showWhenOdd.value;
  40.         };
  42.         return {
  43.             counter,
  44.             increase,
  45.             showWhenOdd,
  46.             showMsg,
  47.             toggleShowCondition
  48.         };
  49.     }
  50. };
  52. </script>
  54. <style scoped>
  55. #app {
  56.     text-align: center;
  57.     margin-top: 60px;
  58. }
  60. .counter {
  61.     width: 100px;
  62.     height: 100px;
  63.     border: 1px solid;
  64.     padding: 10px;
  65. }
  67. .msg-panel {
  68.     width: 100px;
  69.     height: 100px;
  70.     margin: 50px auto;
  71.     border: 1px solid;
  72.     padding: 10px;
  73. }
  74. </style>

上面使用了组合式API的示例实现了相同的功能，注意：

  1. 之前的各种Vue组件的属性 data/methods/computed/mounted等被setup方法代替，setup方法返回的值里面包括模板需要用到的数据和方法。
  2. 之前组件的data里面的数据（counter、showWhenOdd）用ref(<初始值>)代替，数据使用时候，需要通过.value取值。
  3. 之前写在methods中的方法都在setup方法里面实现并返回。
  4. 之前写在computed中的计算属性通过vue中的computed实现，computed接受一个函数，函数返回计算结果。
  5. 之前生命周期钩子mounted被setup中通过onMounted包裹的函数来代替。

对比两段代码我们可以看出，使用setup API的实现明显可以将两段功能逻辑（counter和展示提示信息）各自聚合在一起

Vue Composition API（组合式API） - 图2

这样就实现了我们之前提到的“让功能模块代码（关注点）聚合在一起，使可读性和可维护性更高”的效果，如果我们还希望实现“提供了一种功能模块级别的复用代码的方式”，我们可以这样组织代码：

  1. <template>
  2.     <div id="app">
  3.         <span class="counter">
  4.             {{counter}}
  5.             <button @click="increase">+1</button>
  6.         </span>
  8.         <div class="msg-panel">
  9.             <span v-if="showMsg">
  10.                 hello, world
  11.             </span>
  12.             <button @click="toggleShowCondition">{{showWhenOdd ? '奇数展示' : '偶数展示'}}</button>
  13.         </div>
  14.     </div>
  15. </template>
  17. <script>
  18. import {ref, onMounted, computed} from 'vue';
  20. const useCounter = () => {
  21.     // counter逻辑
  22.     const counter = ref(0);
  23.     const increase = () => {
  24.         counter.value++;
  25.     };
  26.     onMounted(() => {
  27.         counter.value = Math.floor(Math.random() * 9) + 1;
  28.     });
  30.     return {
  31.         counter,
  32.         increase
  33.     };
  34. };
  36. const useMsg = counter => {
  37.     const showWhenOdd = ref(true);
  38.     const showMsg = computed(() => {
  39.         return counter.value % 2 === 0
  40.             ? showWhenOdd.value
  41.             : !showWhenOdd.value;
  42.     });
  43.     const toggleShowCondition = () => {
  44.         showWhenOdd.value = !showWhenOdd.value;
  45.     };
  47.     return {
  48.         showWhenOdd,
  49.         showMsg,
  50.         toggleShowCondition
  51.     };
  52. };
  54. export default {
  55.     setup() {
  56.         const {counter, increase} = useCounter();
  57.         const {showWhenOdd, showMsg, toggleShowCondition} = useMsg(counter);
  59.         return {
  60.             counter,
  61.             increase,
  62.             showWhenOdd,
  63.             showMsg,
  64.             toggleShowCondition
  65.         };
  66.     }
  67. };
  69. </script>
  71. <style scoped>
  72. #app {
  73.     text-align: center;
  74.     margin-top: 60px;
  75. }
  77. .counter {
  78.     width: 100px;
  79.     height: 100px;
  80.     border: 1px solid;
  81.     padding: 10px;
  82. }
  84. .msg-panel {
  85.     width: 100px;
  86.     height: 100px;
  87.     margin: 50px auto;
  88.     border: 1px solid;
  89.     padding: 10px;
  90. }
  91. </style>

通过上面示例可以看到，我们将不同的功能模块封装在函数中，并将关键数据和方法返回，然后在Vue组件的setup方法中引用并返回，就可以在模板中使用了。

除了上述的几个关键API：setup/ref/computed/onMounted，还有toRef用于解构props中的属性，watch用于监听数据，代替Vue组件中的watch属性。可以在官方文档查看用法。