强迫症，大家有没有遵循某种 Vue3 Setup 的书写顺序
<script lang="ts" setup>
// 比如先 const ref reactive
// 再 const handleCreate = () => {}
// 再生命中期
// 再 emit
// ...
</script>
<template>
<div></div>
</template>
<style>
</style>
This topic created in 1068 days ago, the information mentioned may be changed or developed.
 |
1
rimworld Jun 24, 2023 via iPhone
没有遵循某种顺序。 只遵循相关功能的、相关事件的代码放一块。
|
 |
2
murmur Jun 24, 2023
这个顺序感觉并不好，因为 template 才是组件的骨肉部分，先看 template 就知道你大体结构和你想干啥，但是 script 看不出来
|
 |
3
Jaufey Jun 24, 2023 via Android  1
我的一点感想是：每个 SFC setup 的最外层最终只需要一个 hook 就可以了，该 hook 调用后只暴露出模板所需的变量，其余所有的子状态和方法都封装在子 hook 中，同时注意把多个子 hook 都用到的状态提升一下。宗旨就是功能拆分合理，最大限度地限制状态的作用域。二楼说看 script 看不出来逻辑，但这样做以后，script 跟 template 的照应程度能提升一个档次，阅读 script 时也能一目了然功能有哪些。
至于小 hook 里的书写顺序：等拆成一个个小 hook 之后，每个小 hook 里东西不会很多，顺序就自己规定一下。我一般是 import ，props ，emit ，ref ，usehook ，lifecycle ，method ，不会严格遵循。 |
 |
4
Cosmic4764 Jun 24, 2023
我自己是这样：
先 import 然后 interface 然后 所有 const：ref 、computed 、function 然后是所有监听和生命周期啥 最后是一些执行的语句 |
 |
5
tlerbao OP 还有没有不同意见
|
 |
6
terminals Jun 25, 2023 1
一般都是先写界面再写功能的，所以我都是把 template 放最前面，script 放中间
|
 |
7
AuYuHui Jun 25, 2023
安装 个 antfu 的 eslint 配置， 按照大佬的书写配置
|
Select Language