前面介绍的vue的组件书写中，必须要在data，methons，或者computed等模块中写上对应的内容，vue3提供了一种更加*的写法，不用非得定义这些各个模块并只能将需要的内容写入固定的模块中，这种写法叫组合API。

如下Home.vue：

<template>   <div class="home">     count:{{ data.count }}     <br />     double:{{ data.double }}     <br>     <button @click="add()">增加</button>   </div> </template>
<script> //引入vue组合api需要的模块 import { reactive, computed } from "vue";

export default {   setup() {     const data = reactive({       //等价于原来的data中的数据       count: 0,       //等价于原来的计算属性       double: computed(() => {         return data.count * 2;       }),     });     //等价于原来methos中的方法     function add() {       data.count++;     }     //这里必须要将上面的定义返回     return { data, add };   }, }; </script>