如何在Vue.js组件中使用普通JS类，解决new实例时报not a constructor错误

问题修复方案 #

你遇到的报错本质是基础的模块化导出缺失问题，和Vue框架本身无关，Vue完全支持原生普通JS类的使用，不需要迁移到其他框架。
首先修改Test.js，添加默认导出规则，否则你导入的Test会是undefined，实例化时就会抛出非构造函数的错误：

// Test.js 完整代码
export default class Test
{
    constructor()
    {
        this.a = 'test';
    }
    
    test()
    {
        console.log( "test : " + this.a );
    }
}

其次检查Vue组件的语法，你原代码的name属性后缺少合法的分隔逗号，部分严格的语法校验环境也会抛出异常，调整后组件代码如下：

<script>
import Test from './Test.js'

export default {
    name: "whatever",
    mounted() {
        const test = new Test();
        test.a = "its working";
        test.test(); // 运行后控制台正常输出：test : its working
    }
}
</script>

如果调整后仍然报错，检查./Test.js的相对路径是否正确，文件名大小写是否匹配，部分打包工具对路径大小写敏感。

三大框架代码复用性说明 #

三个框架都支持原生JS的类、普通函数等基础复用方式，在常规业务场景下的代码复用能力没有本质差距：

• Vue除了原生JS复用能力外，还提供了mixin、组合式函数（Vue3）、插槽、自定义指令等多种复用手段，学习成本低，灵活性高。
• React主要通过Hooks、高阶组件、render props实现逻辑复用，颗粒度可以做到很细，但Hooks有明确的使用规则约束。
• Angular天生基于类体系开发，配合依赖注入机制对类的支持度最高，复用逻辑的统一管理能力很强，但框架重量大，学习成本最高。
  不存在React或Angular的代码复用性明显优于Vue的情况，你当前的需求Vue完全可以满足。

内容的提问来源于stack exchange，提问作者pls_help