Vue3 组合式 API（Composition API） 主要用于在大型组件中提高代码逻辑的可复用性。
传统的组件随着业务复杂度越来越高，代码量会不断的加大，整个代码逻辑都不易阅读和理解。
Vue3 使用组合式 API 的地方为 setup。
在 setup 中，我们可以按逻辑关注点对部分代码进行分组，然后提取逻辑片段并与其他组件共享代码。因此，组合式 API（Composition API） 允许我们编写更有条理的代码。 
对比以下两端代码：
1、传统组件 
2、组合式 API 
setup 组件
setup() 函数在组件创建 created() 之前执行。
setup() 函数接收两个参数 props 和 context。
第一个参数 props，它是响应式的，当传入新的 prop 时，它将被更新。
第二个参数 context 是一个普通的 JavaScript 对象，它是一个上下文对象，暴露了其它可能在 setup 中有用的值。
以下实例使用组合 API 定义一个计数器：
<template> <div> <p>计数器实例: {{ count }}</p> <input @click="myFn" type="button" value="点我加 1"> </div> </template> <script> import {ref, onMounted} from 'vue'; export default { setup(){ //定义初始值为0的变量，要使用ref方法赋值，直接赋值的话变量改变不会更新 UI let count = ref(0); // 定义点击事件 myFn function myFn(){ console.log(count); count.value += 1; } // 组件被挂载时，我们用 onMounted 钩子记录一些消息 onMounted(() => console.log('component mounted!')); // 外部使用组合API中定义的变量或方法，在模板中可用。 return {count,myFn} // 返回的函数与方法的行为相同 } } </script>
在 Vue 3.0 中，我们可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用，如下所示：
import { ref } from 'vue' let count = ref(0);
ref() 函数可以根据给定的值来创建一个响应式的数据对象，返回值是一个对象，且只包含一个 .value 属性。
在 setup() 函数内，由 ref() 创建的响应式数据返回的是对象，所以需要用 .value 来访问。
import { ref } from 'vue' const counter = ref(0) console.log(counter) // { value: 0 } console.log(counter.value) // 0 counter.value++ console.log(counter.value) // 1
