如何优化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去处理