起因
我们常常看到这种vue代码吧，非常非常长，超过1000行以上，css和js，data，视图混杂在一起。使用vscode的各位会非常痛苦吧（哪怕是webstrom也难免这种痛苦），太长了。
这个例子的代码长度因为需要大家统一规范，然后使用prettier格式化的问题等等，目前是600行不到。但是像这种表单校验，特别是当一个页面的字段50个以上？30+校验rules呢？简直是噩梦啊
一、vue3 hooks和react hooks
首先什么是hooks，我的解读不一定对。但是实际上的表现形式是，开发者对功能进行拆分，达到高度解耦的程度。主要在vue3和react上的表现形式就是hooks语法。把原本嵌合在视图部分的数据层，可以脱离本身视图文件部分独立，达到分离的效果。因为本身响应式是根据数据变化驱动视图。所以vue3是把数据响应式单独拿出来编写的。
vue3代码举例
视图部分
js逻辑部分
因为这种可分离和解耦的情况，视图可做到解耦数据层，不再混杂在一个文件中。
那么vue2这种问题是不是也可以套用思想呢？
二、vue2的解决方案，我的尝试
1、一个错误的示范
首先我们知道mixins这个功能的，但是除了全局混入，请拒绝该功能。我们可以做到类似的功能，但是我们要拒绝该功能。
之前大佬说的一个问题，隐式依赖无法解决。所以请必要的时候使用该功能。
我推荐的是只在全局使用该混入功能。
2、vue2.6带来的新的api提供了解决方式
Vue.observable( object )
让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。
返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景
注意：
在 Vue 2.x 中，被传入的对象会直接被 Vue.observable 变更，所以如这里展示的，它和被返回的对象是同一个对象。在 Vue 3.x 中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的。因此，为了向前兼容，我们推荐始终操作使用 Vue.observable 返回的对象，而不是传入源对象。
3、利用该api，我们至少可以解耦data部分。
大家写校验必定很多，特别是配合el-form这种校验，rules是 放在data层面的。那么真的很长啊。
下面三张图我是这么解决的。
我拆分了data，methods，视图，分成了三个文件。由于vue2特性，所以必须用this对象进行串联。缺点也在这里，this是串联整个文件的核心。变量存在多个文件。当methods操作data部分，不知道的人就不知道这个变量哪来的。但是我们成功解决了这种超大的vue文件。
同理，比如动态计算，watch都可以单独拆一个文件来存在。甚至你把整个js单独拆出来也是可以的。不过看大家的理解吧。必要的拆分是可以的，但是过分的拆分就是过渡设计了。
二、最后
虽然不是非常优雅，但是思考和思想希望能给大家提供帮助。
