vue-class-component

Posted 2023-05-06

参考技术A vue-class-component 是尤大大推出的vue对typescript支持的装饰器(库)

vue-class-component强调了几点用法：

createDecorator可以自定义装饰器，需要接受一个回调函数作为第一个参数，包括以下几个参数

自定义钩子

this为undefined,
原本使用箭头函数的this实际上指向的是vue实例，
但是将箭头函数定义为类属性并在其中访问它，则它将不起作用，this指向的是vue实例的代理

只要将函数定义为方法，就会自动生成vue实例

对于一些属性的初始值应该用null或者data钩子进行处理

vue-class-component 以class的模式写vue组件

vue英文官网推荐了一个叫vue-class-component的包，可以以class的模式写vue组件。vue-class-component(以下简称Component)带来了很多便利：

1.methods，钩子都可以直接写作class的方法

2.computed属性可以直接通过get来获得

3.初始化data可以声明为class的属性

4.其他的都可以放到Component装饰器里

举个小例子

@Component({
    props: {
        firstName: String,
        lastName: String
    },
    components: {
        ‘component-a‘: ComponentA
    }
})
export class XXXX extends Vue {
    firstName: string;
    lastName: string;
    
    //初始data
    middleName = ‘middle‘;
    
    //computed 属性
    get fullName() {
        return this.firstName + this.lastName;
    }
    
    //method
    hello() {
        alert(`Hello ${this.fullName}!`);
    }
    
    //钩子
    mounted() {
        this.hello();
    }
}

现在尽管可以以class的模式来写vue的组件了，但自动补全，代码提示等功能还是没有，要想获取好的代码提示还得是原语言啊，js代码在.ts,.js文件写，scss在.scss写,html在.html写。

最终vue组件以以下方式写感觉挺爽，很顺

import Vue from ‘vue‘;
import Componet from ‘vue-class-component‘;

require(‘./XXX.template.scss‘);

@Component({
    template: require(‘./XXX.template.html‘),
    props: {
        firstName: String,
        lastName: String
    },
    components: {
        ‘component-a‘: ComponentA
    }
})
export class XXXX extends Vue {
    firstName: string;
    lastName: string;
    
    //初始data
    middleName = ‘middle‘;
    
    //computed 属性
    get fullName() {
        return this.firstName + this.lastName;
    }
    
    //method
    hello() {
        alert(`Hello ${this.fullName}!`);
    }
    
    //钩子
    mounted() {
        this.hello();
    }
}

现在各个文件回归它的本职工作了，哈哈哈，不过现在打包时有点小问题，

[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

解决方法也很简单，在webpack配置文件里 加上

alias: {
    ‘vue‘: ‘vue/dist/vue.esm.js‘
}

即可。好的，现在代码补全，语法提示什么功能都回来了。