Vue 的 class 组件介绍(vue-property-decorator)

目录

1、Vue class 组件介绍

2、Vue class 组件基本使用

3、Vue class 组件带来的优点


1、Vue class 组件介绍

在 Vue 的 V2.X 版本中使用 TypeScript 时,推荐使用 基于类的注解装饰器 进行开发。Vue 官方推荐 Vue Class Component,但是它的装饰器可能存在一点小问题,业界普遍推荐使用 vue-property-decorator,它是基于 vue-class-component 开发而成,但是性能上有一些改进,下面主要介绍基于 vue-property-decorator 的 Vue class 组件的基本使用。

Vue class 类组件的基本结构:@Component 装饰器可以使类成为 Vue 组件

import Vue from 'vue'
import Component from 'vue-class-component'    //推荐 vue-property-decorator 

// HelloWorld class will be a Vue component
@Component
export default class HelloWorld extends Vue {}

2、Vue class 组件基本使用

回想一下使用 JS 对象的普通 vue 组件的基本结构是,再看一下基于 JS 或 TS 的类组件的写法:

export default { data, props, methods, created, ...}    // 使用 JS 对象的普通 vue 组件

@Component
export default class XXX extends Vue {    // 用 TS 类 
                    
                    

你可能感兴趣的:(Vue)