如何优化vue单个组件上千行代码的逻辑？

Question

当vue的单个组件内写了上千行代码时怎么去优化呢？（排除为什么不再细分子组件）

确实在项目中遇到了这样的问题，因为细分组件会带来更为复杂的问题，所以，基本所有的逻辑交互都放在了这个组件，代码是ts写的。

随着功能的越来越多，发现要去找一个方法是一件比较麻烦的事，而却会逻辑会越来越混乱...

我目前的重构代码的解决方法是:
（这里不用mixins，因为mixin解决不了一些数据的交互问题）
逻辑归类，模块化

|- Canvas
    |- selector    |- selectorManage

代码大概如下：

import SelectManage from './selectManage';import Selector from './selector';export default class Canvas {    public selector: any = {};    public selectManage: any = {};    private vm: any = undefined;    constructor( argments ) {        const { vue } = argments;        this.selector = new selector();        this.selectManage = new selectManage();        this.vm = vue;
    }

}
    
这时遇到了如何将vue引入模块的问题，所以我索性就把vue当成参数传递进来...

不知道将vue作为参数去传递到模块中，这么做对性能会有什么影响。
还有人知道怎么优化这样的代码比较好吗？

Answer 1

是没有用vuex吗？如果说有些数据在多个组件中有复杂的共享逻辑，建议把这些数据放到vuex去处理