vue 为了文件代码行数不太长 一个文件拆分成 html js scss 三个文件，这样做法感觉有啥意义？
lifesimple · 2022-07-29 11:19:25 +08:00 · 2170 次点击这是一个创建于 840 天前的主题，其中的信息可能已经有所发展或是发生改变。
<template src="./main.html"></template>
<script src="./main.js"></script>
<style lang="scss" scoped src="./main.scss"></style>
除了每个文件代码行数少点，改个功能还得翻两三个文件看？
各位大佬一般怎么处理复杂功能页面的代码行数过长问题
1. 比如一些纯展示的弹框 表单弹框等这些写成外面的组件
2. 如果可以复用的内容 肯定也是抽成组件来写
如果上面的都不是 单纯为了减少代码行数，把代码硬抽离组件（不会复用其他地方）感觉只是增加工作量，以及处理 props 通信 当然文件代码行数会少很多吧
<script src="./main.js"></script>
<style lang="scss" scoped src="./main.scss"></style>
除了每个文件代码行数少点，改个功能还得翻两三个文件看？
各位大佬一般怎么处理复杂功能页面的代码行数过长问题
1. 比如一些纯展示的弹框 表单弹框等这些写成外面的组件
2. 如果可以复用的内容 肯定也是抽成组件来写
如果上面的都不是 单纯为了减少代码行数，把代码硬抽离组件（不会复用其他地方）感觉只是增加工作量，以及处理 props 通信 当然文件代码行数会少很多吧
 |
1
wshhfy 2022-07-29 11:30:45 +08:00 via Android
我是不拆分的，但是必定封装组件和弹窗。script 中的结构很清晰，但是一堆 html 实在是看的乱😂
|
 |
2
lifesimple OP @wshhfy 乱是不乱的 那堆 html 代码就是原来的 template ，只是 main.js 功能逻辑多，导致代码行数比较多，这么拆分只是纯粹的降低每个文件的代码行数，但这样也没啥卵用，后面功能多 main.js 不是一样会很长。总不会再拆成几个 main1.js main2.js 这样把。我是觉得真没必要为了代码行数这样拆代码。以及强行拆，感觉维护 state 要比 组件通信要省力点
|
 |
3
66beta 2022-07-29 11:41:42 +08:00
代码长主要是因为维护起来麻烦，尽量抽组件吧
个人很反感 css 分离出去 单*.vue 文件才是精髓 |
 |
4
banricho 2022-07-29 11:43:39 +08:00  1
首先，大多数时候一个 .vue 文件里，JS 模板 CSS 都是不拆的。
支持外部引入是给你更多的灵活性，比如业务逻辑、模板、样式的复用，亦或者是其他需求。 组件化除了复用以外，还有一层意义就是业务分治。通过减少耦合，增加灵活性，方便维护。 除 props 以外还有 store 之类的全局 / 模块状态方案，他们各有其用途和价值。 组件如何拆挺考验业务的理解和嗅觉的，做得好了当产品迭代或需求变更时，你会感觉得到。 |
 |
5
toesbieya 2022-07-29 12:23:44 +08:00
html 、css 肯定不要拆出去，把 js 里面相对功能独立的逻辑拆到同文件夹的另一个 js 里，这样你后面维护不会说一个文件太长不好找
|
 |
6
daolanfler 2022-07-29 14:13:38 +08:00
用类似 hooks 的写法，在 vue3 composition-api 的加持下 js 的重复逻辑 /配置、xhr 请求之类的都可以放在单独的文件，用的时候 useXXX ，参考一下 @vueuse/core 里面的写法，会发现能复用的地方还是挺多的。
|
 |
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 这种做法，感觉就像按代码字数算绩效一样没意义 |
 |
8
angel001ma 2022-07-29 14:19:43 +08:00
没有
|
 |
9
dfkjgklfdjg 2022-07-29 14:38:01 +08:00
和 1 楼一样不拆分，当前文件只会有当前组件的模板和 js 内容，其他的弹窗或者别的东西都是封组件。其实一个组件不超过 500~800 行的范围就没啥问题。
如果真的某一部分的业务代码很复杂，会考虑抽成一个业务 js ，再 import 进来使用。 |
|
10
banricho 2022-07-29 18:33:36 +08:00
@horseInBlack
Vue 作者也承认 mixin 是一个不太利于维护的东西，只有必要的时候才使用，平时尽量不要碰。 即便要用，个人也推荐给 mixin 中的数据、方法一个显而易见的命名空间，否则是灾难。 |
Select Language