options API
vue2 采用的是 options API，按照代码自己的类型进行分类管理和存放，数据放data里面，事件放xxx里面，这样呢，对于简单的组件，或者原子级别的组件，确实挺简洁和规范的。
但是组件再原子级别，也是需要一个大的组件进行整合，那么整合的组件里面的代码要如何管理呢？还有代码复用的问题。
composition API
vue3 提出了 composition API 的方式，其特点就是可以把vue的特性（reactive、ref、computer、生命周期的钩子等）拿出来放在单独的js文件里面，这样我们就可以按照业务需求来管理代码了，也就是可以借用面对对象的思路，或者MVC的control（控制）的思路来管理代码。
这个时候就需要一个思维方式的转换。如果没有转过来这个弯的话，就会觉得compositionAPI是非常麻烦的，代码会写乱，也就是传说中的“心智陷阱”。
script setup
这个大概是 composition API 的另一种表现形式吧，它做的更“过分”。
一般的情况，composition API 还可以分成属性部分、代码部分（setup）、其他属性，还可以兼容optionsAPI。
但是如果采用script setup 的话，那么真的是“全部”的代码都写在一起了。一点自带的区分都没有。
所以，如果用不好的话，代码会更乱。
尝试着写了一些代码体验了一下各种用法，先看一个例子吧。
- 列表页面，分成四个组件：
<template>
<div>
<!--查询-->
<find :moduleId="moduleId"/>
<!--按钮-->
<mybutton :moduleId="moduleId"/>
<!--列表-->
<elGridList
v-bind="girdMeta"
:data-list="dataList"
:selection="dataListState.choice"
/>
<!--分页-->
<pager/>
</div>
</template>
- 引用一些需要的 js 函数。
<script>
import { defineProps, reactive, watch } from 'vue'
// 加载json
import loadJson from './control/loadjson.js'
// 状态
import VueDS from 'vue-data-state'
// 控制函数
import dataListManage from './control/data-list.js'
</script>
- setup 部分
<script setup>
// 查询组件
import find from './find.vue'
// 按钮组件
import mybutton from './buttons.vue'
// 列表控件
import elGridList from '/ctrl/nf-el-grid/nf-el-grid-list.vue'
// 分页组件
import pager from './pager.vue'
// 属性：模块ID
const props = defineProps({
moduleId: [Number, String]
})
// 列表用的 meta
const girdMeta = reactive({})
// 依据模块ID，加载meta
loadJson(props.moduleId, 'grid', girdMeta)
// 列表的状态管理类
const {
regDataListState, // 注册列表状态
dataList, // 数据列表
setHotkey // 设置快捷键
} = dataListManage(props.moduleId)
// 注册列表状态
const dataListState = regDataListState()
// 设置快捷键
setHotkey(dataListState)
</script>
为啥要分成两个 script 标签？
因为可以。
好吧，我是想把代码尽量分离出去，不想 setup 部分的代码太多，否则看着乱。
另一个原因，真的是因为可以这么做，否则我也就不得不都放在一起了。
这样写是否可以清晰一些？
这是管理后台的列表页面，里面有查询、数据列表、分页、按钮（通过按钮打开表单）。
setup 里面没有具体的实现代码，而是一些调用代码，把需要的数据传递进去。这个，自我感觉良好吧，目前还想不出来更好的优化方式。
最后，现在为啥没有个讨论环境呢？？？
