开窍篇
提示： 这里针对一些常用代码片段做一下解读，便于大家快速上手。
- vue3与vue2有很大的区别，设计理念完全不同，vue2是基于模板思想，vue3侧重JS(Reactivity API+TS)。
- 对于熟悉html的人vue2会很容易上手；但是对于vue3如果es6没有一定功底的话，会很有难度。
1、解构出来的函数的执行
代码解读：
这段代码的含义是
goPage是useMessageHref函数中定义的函数(也就是function中的function)，function 中定义的子函数只是定义不会运行，运行的话需要手工调用子函数才会执行。
说明：vue3项目中这种写法是基础用法，了解此函数使用原理，非常重要。
2、ES6解构原理知识点
//数组解构（[]）
const [registerModal, { openModal }] = useModal();
//对象解构（{}）
const { goPage, registerHistoryModal, registerTaskModal, registerDesignFormModal, isDesignFormComment } = useMessageHref(emit, props);
3、项目中useModal()采用了数组解构
//弹窗modal为什么采用数组解构呢？
const [registerModal, { openModal }] = useModal();
大家看看useModal()函数的定义，发现返回值类型是数组
4、BasicForm封装太狠
方案一：通过插槽自定义没有的控件
参考代码：src/views/demo/form/index.vue
参考路由：http://localhost:3100/comp/form/basic
字段自定义
{
field: 'selectA',
component: 'Select',
label: '互斥SelectA',
slot: 'selectA',
defaultValue: [],
colProps: {
span: 8,
},
},
插槽代码
<template #selectA="{ model, field }">
<a-select :options="optionsA" mode="multiple" v-model:value="model[field]" @change="valueSelectA = model[field]" allowClear />
</template>
方案二：采用原生写法a-form
项目支持不使用封装的BasicForm，并提供了示例和对应的代码生成。
参考示例：src/views/demo/jeecg/Native/one/components/OneNativeForm.vue
参考路由：http://localhost:3100/one/OneNativeList
快捷技巧：生成代码的时候选择 Vue3原生
