V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
lifesimple
V2EX  ›  问与答

vue 为了文件代码行数不太长 一个文件拆分成 html js scss 三个文件,这样做法感觉有啥意义?

  •  
  •   lifesimple · 2022-07-29 11:19:25 +08:00 · 1968 次点击
    这是一个创建于 609 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <template src="./main.html"></template>
    <script src="./main.js"></script>
    <style lang="scss" scoped src="./main.scss"></style>

    除了每个文件代码行数少点,改个功能还得翻两三个文件看?
    各位大佬一般怎么处理复杂功能页面的代码行数过长问题
    1. 比如一些纯展示的弹框 表单弹框等这些写成外面的组件
    2. 如果可以复用的内容 肯定也是抽成组件来写

    如果上面的都不是 单纯为了减少代码行数,把代码硬抽离组件(不会复用其他地方)感觉只是增加工作量,以及处理 props 通信 当然文件代码行数会少很多吧
    10 条回复    2022-07-29 18:33:36 +08:00
    wshhfy
        1
    wshhfy  
       2022-07-29 11:30:45 +08:00 via Android
    我是不拆分的,但是必定封装组件和弹窗。script 中的结构很清晰,但是一堆 html 实在是看的乱😂
    lifesimple
        2
    lifesimple  
    OP
       2022-07-29 11:36:18 +08:00
    @wshhfy 乱是不乱的 那堆 html 代码就是原来的 template ,只是 main.js 功能逻辑多,导致代码行数比较多,这么拆分只是纯粹的降低每个文件的代码行数,但这样也没啥卵用,后面功能多 main.js 不是一样会很长。总不会再拆成几个 main1.js main2.js 这样把。我是觉得真没必要为了代码行数这样拆代码。以及强行拆,感觉维护 state 要比 组件通信要省力点
    66beta
        3
    66beta  
       2022-07-29 11:41:42 +08:00
    代码长主要是因为维护起来麻烦,尽量抽组件吧

    个人很反感 css 分离出去 单*.vue 文件才是精髓
    banricho
        4
    banricho  
       2022-07-29 11:43:39 +08:00   ❤️ 1
    首先,大多数时候一个 .vue 文件里,JS 模板 CSS 都是不拆的。
    支持外部引入是给你更多的灵活性,比如业务逻辑、模板、样式的复用,亦或者是其他需求。

    组件化除了复用以外,还有一层意义就是业务分治。通过减少耦合,增加灵活性,方便维护。
    除 props 以外还有 store 之类的全局 / 模块状态方案,他们各有其用途和价值。

    组件如何拆挺考验业务的理解和嗅觉的,做得好了当产品迭代或需求变更时,你会感觉得到。
    toesbieya
        5
    toesbieya  
       2022-07-29 12:23:44 +08:00
    html 、css 肯定不要拆出去,把 js 里面相对功能独立的逻辑拆到同文件夹的另一个 js 里,这样你后面维护不会说一个文件太长不好找
    daolanfler
        6
    daolanfler  
       2022-07-29 14:13:38 +08:00
    用类似 hooks 的写法,在 vue3 composition-api 的加持下 js 的重复逻辑 /配置、xhr 请求之类的都可以放在单独的文件,用的时候 useXXX ,参考一下 @vueuse/core 里面的写法,会发现能复用的地方还是挺多的。
    horseInBlack
        7
    horseInBlack  
       2022-07-29 14:19:06 +08:00
    我建议按照功能拆分组件,多用 mixin / hooks / 公共方法

    如果只是为了减少代码长度,是觉得上下来回翻比较麻烦?
    1.可以换 Vue 3 的 composition API ,相关功能点写在一起,而不是像 Vue 2 选项式 API data 一堆、methods 一堆
    2.编辑器里安装插件可以方便地拆分 template / style / script ,不用插件自己手动拆分窗口也行

    总之为减少长度而拆分 vue 这种做法,感觉就像按代码字数算绩效一样没意义
    angel001ma
        8
    angel001ma  
       2022-07-29 14:19:43 +08:00
    没有
    dfkjgklfdjg
        9
    dfkjgklfdjg  
       2022-07-29 14:38:01 +08:00
    和 1 楼一样不拆分,当前文件只会有当前组件的模板和 js 内容,其他的弹窗或者别的东西都是封组件。其实一个组件不超过 500~800 行的范围就没啥问题。
    如果真的某一部分的业务代码很复杂,会考虑抽成一个业务 js ,再 import 进来使用。
    banricho
        10
    banricho  
       2022-07-29 18:33:36 +08:00
    @horseInBlack
    Vue 作者也承认 mixin 是一个不太利于维护的东西,只有必要的时候才使用,平时尽量不要碰。
    即便要用,个人也推荐给 mixin 中的数据、方法一个显而易见的命名空间,否则是灾难。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5282 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 09:11 · PVG 17:11 · LAX 02:11 · JFK 05:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.