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

[lifesimple]

<template src="./main.html"></template>
<script src="./main.js"></script>
<style lang="scss" scoped src="./main.scss"></style>

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

如果上面的都不是 单纯为了减少代码行数，把代码硬抽离组件（不会复用其他地方）感觉只是增加工作量，以及处理 props 通信 当然文件代码行数会少很多吧

[wshhfy]

我是不拆分的，但是必定封装组件和弹窗。script 中的结构很清晰，但是一堆 html 实在是看的乱😂

[lifesimple]

@wshhfy 乱是不乱的 那堆 html 代码就是原来的 template ，只是 main.js 功能逻辑多，导致代码行数比较多，这么拆分只是纯粹的降低每个文件的代码行数，但这样也没啥卵用，后面功能多 main.js 不是一样会很长。总不会再拆成几个 main1.js main2.js 这样把。我是觉得真没必要为了代码行数这样拆代码。以及强行拆，感觉维护 state 要比 组件通信要省力点

[66beta]

代码长主要是因为维护起来麻烦，尽量抽组件吧

个人很反感 css 分离出去 单*.vue 文件才是精髓

[banricho]

首先，大多数时候一个 .vue 文件里，JS 模板 CSS 都是不拆的。
支持外部引入是给你更多的灵活性，比如业务逻辑、模板、样式的复用，亦或者是其他需求。

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

组件如何拆挺考验业务的理解和嗅觉的，做得好了当产品迭代或需求变更时，你会感觉得到。

[toesbieya]

html 、css 肯定不要拆出去，把 js 里面相对功能独立的逻辑拆到同文件夹的另一个 js 里，这样你后面维护不会说一个文件太长不好找

[daolanfler]

用类似 hooks 的写法，在 vue3 composition-api 的加持下 js 的重复逻辑 /配置、xhr 请求之类的都可以放在单独的文件，用的时候 useXXX ，参考一下 @vueuse/core 里面的写法，会发现能复用的地方还是挺多的。

[horseInBlack]

我建议按照功能拆分组件，多用 mixin / hooks / 公共方法

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

总之为减少长度而拆分 vue 这种做法，感觉就像按代码字数算绩效一样没意义

[angel001ma]

没有

[dfkjgklfdjg]

和 1 楼一样不拆分，当前文件只会有当前组件的模板和 js 内容，其他的弹窗或者别的东西都是封组件。其实一个组件不超过 500~800 行的范围就没啥问题。
如果真的某一部分的业务代码很复杂，会考虑抽成一个业务 js ，再 import 进来使用。

[banricho]

@horseInBlack
Vue 作者也承认 mixin 是一个不太利于维护的东西，只有必要的时候才使用，平时尽量不要碰。
即便要用，个人也推荐给 mixin 中的数据、方法一个显而易见的命名空间，否则是灾难。