Question

我对Vue生态系统非常陌生，我想实现以下目标：

**VisitListTemplateFile.vue**
<template>...</template>
<script>
    import  VisitListView from '../../views/VisitListView'
    import '../../assets/vendor/datatables/app.datatables';
    import Body from '../partials/Body';
    export default new VisitListView("VisitListView", Body);
</script>

<style scoped>
    @import "../../assets/vendor/datatables/datatables.min.css";
</style>

**VisitListViewFile.js**
import {BaseView} from '../../core/BaseView';

export default class VisitListView extends BaseView {

    constructor(name, ...components) {
        super(name, ...components);
    }

    mounted() {
      console.log("TEST");
    }
}

它可以工作，但是我知道虽然有一种解决方法可以使回调函数（例如 mounted ）被调用。我想知道是否有一种更清洁的方法。

---- UPDATE ----

我做到了，而且奏效了，所以我的问题是，这有什么问题吗？

BaseView.js
export class BaseView {
    constructor(name, ...components) {
        this.name = name;
        this.components = {};

        components.forEach(comp => {
            this.components[comp.name] = comp;
        });

        return {
            components: this.components,
            mounted: this.mounted
        }
    }

    mounted(){
        super.mounted();
    }
}

Answer 1

如果在声明组件时更喜欢基于类的API，则可以使用官方维护的vue-class-component装饰器：

https://vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Components

使用官方类语法有其自身的优点：

您的代码对于其他人，尤其是具有Angular2 +背景的人来说，将更容易理解
Vue.js 3（即将在一年后发布）将使用以TypeScript为标准的类语法。

使用基于javascript类的样式作为Vue组件

1 个答案: