Vue3 中常用的 Composition(组合)API- 初识 setup

setup 是 vue3 的入门技术，想要学习 vue3，最好从它开始，因为 setup 是所有 Composition API（组合 API）表演的舞台 ****。如果没有 setup，那么其他的组合式 API 都没地方写

setup 是 Vue3.0 中一个新的配置项，值为一个函数，组件中所用到的：数据、方法等等，均要配置在 setup 中，它有两种返回值。对象和渲染函数，下面通过案例一一说明使用

注意：此处的案例只是测试一下 setup,暂时不考虑响应式的问题。

返回对象(重点关注)

如果 setup 返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用，这种返回方式也是用的比较多的一种

比如这里我定义了一些数据和方法。返回对象的时候如果 key 和 value 一致，那么可以只保留 key

使用的时候直接进行插值语法获取和事件绑定即可，这里比 vue2 多了一步：需要手动 return 方法或数据

数据肯定是可以通过 setup 返回对象的方式获取到的

返回渲染函数(了解即可)

setup 除了可以返回对象，还可以返回渲染函数，可以自定义渲染内容，这种返回方式相对来说用的比较少(了解即可)

在渲染之前需要手动引入

引入渲染 h

vue3 一个很大的特点就是使用什么就直接引入

这个 h vue3 已经帮助我们封装好了，直接引入并使用即可

// 引入渲染himport {h} from 'vue'

细节问题

虽然在 vue3 中可以写一个 vue2 相关的配置，包括 data、methos、computed...但是并不推荐在 vue3 中写 vue2 相关代码，因为虽然 vue2 可以访问到 setup 中的属性、方法，但是但在 setup 中不能访问到 Vue2 配置的 data、methos、computed，另外如果有重名, setup 优先

setup 总结

1. 理解：Vue3.0 中一个新的配置项，值为一个函数。

2. setup 是所有 Composition API（组合 API） *“ *表演的舞台 ” 。

3. 组件中所用到的：数据、方法等等，均要配置在 setup 中。

4. setup 函数的两种返回值：

5. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）

6. 若返回一个渲染函数：则可以自定义渲染内容。（了解）

7. 注意点：

8. 尽量不要与 Vue2.x 配置混用

9. Vue2.x 配置（data、methos、computed...）中可以访问到 setup 中的属性、方法。

10. 但在 setup 中不能访问到 Vue2.x 配置（data、methos、computed...）。

11. 如果有重名, setup 优先。

12. setup 不能是一个 async 函数，因为返回值不再是 return 的对象, 而是 promise, 模板看不到 return 对象中的属性。（后期也可以返回一个 Promise 实例，但需要 Suspense 和异步组件的配合）