什么是Composition API

Composition API 又叫作组合式 API，理解组合式 API 需要先回顾 Vue2.X 是如何做功能开发的。在 Vue2 中，功能开发需要分散到 data 属性、methods 属性及 computed 属性中，代码如下。

export default {
  data() {
    return {
      // 定义 data 接收数据
      data: []
    };
  },
  methods: {
    // 发送 ajax 获取服务器端数据
    // 接收到的数据赋值给 data 属性
    getdata() {}
  },
  computed() {}
};

每一个功能模块的开发至少需要分散到 data 属性和 methods 属性，这种形式叫作 Options API。随着项目的扩大，功能模块会分散到各个属性中，导致代码的可阅读性和可维护性极差，并且很难进行代码复用。

Composition API 主要用来解决上述问题，可以把每个功能都写在一起，或者单独写在函数中，不会出现功能分散的问题，这样就提高了代码的可阅读性和可维护性，因为功能模块可以写在函数中，从而提高了代码的复用性。

setup函数的特点

在 Vue3 项目中，setup() 函数是 Composition API 的入口函数，也是 Vue3 中新增的函数，setup() 函数的主要特点有以下 3 个。

setup 函数类似于生命周期，它在 beforeCreate 生命周期之前自动调用。
setup 函数中没有 this。
setup 函数中的数据或者方法都需要 return 出去。

案例：定义数字变量，单击按钮数字加 1。

错误代码的演示如下。

<template>
  <div>
    <h1>{{ num }}</h1>
    <button @click="addOne">加1</button>
  </div>
</template>

<script>
export default {
  setup() {
    // 1. 定义数字变量
    var num = 10;
    // 2. 定义方法
    function addOne() {
      num++;
      console.log(num);
    }
    // 3. 将数据和方法 return 出去，只有 return 出去，其在模板中才能使用
    return {
      num,
      addOne
    };
  }
};
</script>

代码解析如下。

运行代码，单击自增按钮，发现控制台中的 num 发生变化，但是页面中的 num 没有改变。

结论：使用 var 或者 let 定义的数据都不具有响应式功能，或者说不具有双向数据绑定功能。

定义响应式数据

响应式数据的定义方法有两种：一种是定义基本数据类型，如数字类型、字符串类型等；另一种是定义复合数据类型，如数组、对象。

12.2.1 节案例的正确代码如下。

<template>
  <div>
    <h1>{{ num }}</h1>
    <button @click="addOne">加1</button>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    // 1. 定义响应式数字
    var num = ref(10);
    // 2. 定义方法
    function addOne() {
      console.log(num); // 打印出一个对象
      num.value++;
    }
    return {
      num,
      addOne
    };
  }
};
</script>

代码解析如下。

使用 ref 函数将普通数据变成响应式数据。

ref 函数的使用步骤如下。

（1）引入 ref 函数。

import { ref } from "vue";

（2）ref 函数的返回值是对象，即控制台打印的 num 是对象。

{
__v_isRef: true
_rawValue: 11
_shallow: false
_value: 11
}

（3）M 层最终需要的值在 value 属性下，所以使用 .value 获取具体值。（4）视图层不需要 .value 获取值，在视图层会自动找到 value 值，视图层直接使用插值表达式 {{num}} 即可。