强迫症，大家有没有遵循某种 Vue3 Setup 的书写顺序
<script lang="ts" setup> // 比如先 const ref reactive // 再 const handleCreate = () => {} // 再生命中期 // 再 emit // ... </script> <template> <div></div> </template> <style> </style> This topic created in 1076 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