Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello-uvue
提交
2b6d2943
H
hello-uvue
项目概览
DCloud
/
hello-uvue
通知
350
Star
2
Fork
7
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello-uvue
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
2b6d2943
编写于
5月 07, 2024
作者:
DCloud-WZF
💬
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
chore: remove refactor md
上级
abb4ab09
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
0 addition
and
192 deletion
+0
-192
refactor_options-API-composition-API-correspondence.md
refactor_options-API-composition-API-correspondence.md
+0
-192
未找到文件。
refactor_options-API-composition-API-correspondence.md
已删除
100644 → 0
浏览文件 @
abb4ab09
# hello uvue 选项式 API 与 组合式 API 对应重构
## 文件目录逻辑
按 API 类型划分文件夹,每个文件夹下有多个示例或 API
\
每个示例或 API 有一个文件夹,文件夹名为示例或 API 名称
\
每个文件夹下有 xxx-options.uvue 和 xxx-composition.uvue,分别对应选项式 API 示例和组合式 API 示例
<!-- template 和 style 通过 src 引入,两种 API 示例共用 -->
## 代码规范
不要有空的style, script
\
script 中不要有空的 data, onLoad, methods
\
缩进使用两个空格
\
公共 css class 维护在 styles/common.css 中
## GoGoCode
一个用于进行代码转换的 vscode 插件,在本项目中,可用于将 options API 写法转为 composition setup API 写法
### transform function
目前仅处理了 script 节点
已知问题:
-
无法处理函数返回值类型
-
无法处理函数换行
```
js
function
transform
(
fileInfo
,
api
)
{
const
$
=
api
.
gogocode
let
source
=
fileInfo
.
source
source
=
source
.
replace
(
/<script/g
,
"
<script setup
"
);
const
ast
=
$
(
source
,
{
parseOptions
:
{
language
:
'
vue
'
}
})
const
script
=
ast
.
find
(
'
<script setup></script>
'
)
script
.
replace
(
'
components:{},
'
,
''
).
replace
(
'
mixins:[]
'
,
''
)
script
.
find
(
'
data(){return {}},
'
)
.
replace
(
'
$_$:$_$
'
,
'
const $_$ = ref($_$)
'
)
.
replace
(
'
data(){return {$$$}}
'
,
'
$$$
'
)
script
.
find
(
'
computed:{}
'
)
.
replace
(
'
$_$(){$$$}
'
,
'
const $_$ = computed(() => {$$$})
'
)
script
.
find
(
'
watch:{}
'
)
.
replace
(
'
$_$:{handler($_$){$$$}}
'
,
'
watch(() => $_$,($_$) => {$$$})
'
)
.
replace
(
'
$_$:{handler(){$$$}}
'
,
'
watch(() => $_$,() => {$$$})
'
)
.
replace
(
"
'$_$':{handler($_$){$$$},deep: true}
"
,
'
watch(() => $_$,($_$) => {$$$},{deep: true})
'
)
.
replace
(
"
'$_$':{handler($_$){$$$}}
"
,
'
watch(() => $_$,($_$) => {$$$})
'
)
.
replace
(
'
$_$($_$){$$$}
'
,
'
watch(() => $_$,($_$) => {$$$})
'
)
.
replace
(
'
$_$(){$$$}
'
,
'
watch(() => $_$,() => {$$$})
'
)
.
replace
(
'
watch:{$$$}
'
,
'
$$$
'
)
script
.
replace
(
'
onLoad(){$$$}
'
,
'
onLoad(() => {$$$})
'
)
.
replace
(
'
onShow(){$$$}
'
,
'
onShow(() => {$$$})
'
)
.
replace
(
'
onReady(){$$$}
'
,
'
onReady(() => {$$$})
'
)
.
replace
(
'
onHide(){$$$}
'
,
'
onHide(() => {$$$})
'
)
.
replace
(
'
onUnload(){$$$}
'
,
'
onUnload(() => {$$$})
'
)
.
replace
(
'
onBackPress(){$$$}
'
,
'
onBackPress(() => {$$$})
'
)
.
replace
(
'
created(){$$$}
'
,
'
onBeforeMount(() => {$$$})
'
)
.
replace
(
'
mounted(){$$$}
'
,
'
onMounted(() => {$$$})
'
)
.
replace
(
'
beforeUnmount(){$$$}
'
,
'
onBeforeUnmount(() => {$$$})
'
)
.
replace
(
'
unmounted(){$$$}
'
,
'
onUnmounted(() => {$$$})
'
)
.
replace
(
'
beforeDestroy(){$$$}
'
,
'
onBeforeUnmount(() => {$$$})
'
)
.
replace
(
'
destoryed(){$$$}
'
,
'
onUnmounted(() => {$$$})
'
)
script
.
find
(
'
methods:{}
'
)
.
replace
(
'
async $_$($$$0){$$$1}
'
,
'
const $_$ = async ($$$0) => {$$$1}
'
)
.
replace
(
'
$_$($$$0){$$$1}
'
,
'
const $_$ = ($$$0) => {$$$1}
'
)
.
replace
(
'
async $_$(){$$$}
'
,
'
const $_$ = async () => {$$$}
'
)
.
replace
(
'
$_$(){$$$}
'
,
'
const $_$ = () => {$$$}
'
)
.
replace
(
'
methods:{$$$}
'
,
'
$$$
'
)
script
.
replace
(
'
export default {$$$}
'
,
'
$$$
'
)
return
ast
.
generate
()
}
```
## app instance
-
[x] app.component
-
[x] app.globalProperties app.globalProperties
-
[x] app.use app.use
## component instance
-
[x] attrs useAttrs
-
[x] data
-
[x] props defineProps
-
[x] el
-
[x] options defineOptions
-
[x] parent
-
[x] root root
-
[x] slots defineSlots useSlots
-
[x] refs ref
-
[x] emit defineEmits
-
[x] forceUpdate
-
[x] methods
-
[x] provide provide
-
[x] inject inject
-
[x] mixins
-
[x] nextTick
-
[x] options API setup
-
[x] defineExpose
-
[x] circular reference
## reactivity
-
[x] ref
-
[x] reactive
-
[x] computed computed
-
[x] watch watch
-
[x] watchEffect
-
[x] watchPostEffect
-
[x] watchSyncEffect
-
[x] readonly
-
[x] isProxy
-
[x] isReactive
-
[x] isReadonly
-
[x] isRef
-
[x] toRef
-
[x] toRefs
-
[x] toValue
-
[x] unRef
-
[x] customRef
-
[x] effectScope
-
[x] getCurrentScope
-
[x] markRaw
-
[x] onScopeDispose
-
[x] shallowReactive
-
[x] shallowReadonly
-
[x] shallowRef
-
[x] toRaw
-
[x] triggerRef
## directives
-
[x] v-html
-
[x] v-show
-
[x] v-if v-else-if v-else
-
[x] v-for
-
[x] v-on
-
[x] v-bind
-
[x] v-model
-
[x] v-slot
-
[x] v-pre
-
[x] v-once
-
[x] v-memo
-
[x] v-text
-
[ ] v-cloak 暂不支持
## lifecycle
-
[x] component
-
[x] page
## built-in components
-
[x] keepAlive keepAlive
-
[x] teleport teleport
## template
-
[x] nested-component-communication
-
[x] set-custom-child-component-root-node-class
## rendering
-
[x] component is
-
[x] render function 暂不支持 composition API
-
[x] slots
-
[x] template 节点中 style class v-bind map 数据
-
[x] template 标签测试
-
[x] unrecognized-component
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录