目前 Vue3 有没有什么比较标准的书写顺序

[tlerbao]

强迫症，大家有没有遵循某种 Vue3 Setup 的书写顺序

<script  lang="ts" setup>
// 比如先 const ref reactive
// 再 const handleCreate = () => {}
// 再生命中期
// 再 emit
// ...
</script>
<template>
    <div></div>
</template>
<style>
</style>

[rimworld]

没有遵循某种顺序。 只遵循相关功能的、相关事件的代码放一块。

[murmur]

这个顺序感觉并不好，因为 template 才是组件的骨肉部分，先看 template 就知道你大体结构和你想干啥，但是 script 看不出来

[WhateverYouLike]

我的一点感想是：每个 SFC setup 的最外层最终只需要一个 hook 就可以了，该 hook 调用后只暴露出模板所需的变量，其余所有的子状态和方法都封装在子 hook 中，同时注意把多个子 hook 都用到的状态提升一下。宗旨就是功能拆分合理，最大限度地限制状态的作用域。二楼说看 script 看不出来逻辑，但这样做以后，script 跟 template 的照应程度能提升一个档次，阅读 script 时也能一目了然功能有哪些。

至于小 hook 里的书写顺序：等拆成一个个小 hook 之后，每个小 hook 里东西不会很多，顺序就自己规定一下。我一般是 import ，props ，emit ，ref ，usehook ，lifecycle ，method ，不会严格遵循。

[Cosmic4764]

我自己是这样：
先 import
然后 interface
然后 所有 const：ref 、computed 、function
然后是所有监听和生命周期啥
最后是一些执行的语句

[tlerbao]

还有没有不同意见

[terminals]

一般都是先写界面再写功能的，所以我都是把 template 放最前面，script 放中间

[AuYuHui]

安装 个 antfu 的 eslint 配置， 按照大佬的书写配置

[dengshen]

@terminals +1 保留 vue2 风格了

[tlerbao]

@terminals 我是说 script 里面的顺序