一、vue-class-component

作用：将 Vue 组件写成 ES6/TypeScript 类的形式，替代传统的 export default {} 对象写法，更适合 TypeScript。

安装

npm install vue-class-component

基本用法

import { Vue, Options } from 'vue-class-component';

@Options({
  props: {
    msg: String
  }
})
export default class MyComponent extends Vue {
  mounted() {
    console.log(this.msg);
  }

  greet() {
    alert(`Hello, ${this.msg}`);
  }
}

特点：

  • 支持 props、data、computed、methods 等 Vue API。
  • 与 TypeScript 配合良好，提供类型推导。
  • Vue 3 推荐使用 defineComponent + class 语法。

二、vue-property-decorator

作用：在 class-component 基础上，提供 装饰器（Decorator），让你用简洁语法声明 props、watch、computed、Emit 等。

安装

npm install vue-property-decorator

常用装饰器

装饰器功能示例
@Prop定义 props@Prop() msg!: string;
@Watch监听属性@Watch('msg') onMsgChanged(val:string){}
@Emit自动触发事件@Emit() notify(){}
@Model双向绑定@Model('update') value!: string;

示例

import { Vue } from 'vue-class-component';
import { Prop, Watch, Emit } from 'vue-property-decorator';

export default class MyComponent extends Vue {
  @Prop() msg!: string;

  @Watch('msg')
  onMsgChanged(newVal: string) {
    console.log('msg changed:', newVal);
  }

  @Emit('sayHello')
  greet() {
    return `Hello, ${this.msg}`;
  }
}

三、vuex-class

作用：将 Vuex 的 state、getters、actions、mutations 映射到 class 中的装饰器，避免手动写 mapState、mapActions。

安装

npm install vuex-class

常用装饰器

装饰器功能示例
@State映射 state@State('count') count!: number;
@Getter映射 getter@Getter('double') doubleCount!: number;
@Action映射 action@Action('increment') increment!: () => void;
@Mutation映射 mutation@Mutation('reset') reset!: () => void;

示例

import { Vue } from 'vue-class-component';
import { State, Action } from 'vuex-class';

export default class Counter extends Vue {
  @State('count') count!: number;
  @Action('increment') increment!: () => void;

  increase() {
    this.increment();
  }
}

四、GeoJSON

作用：地理信息数据标准格式，常用于 地图可视化（Leaflet、Mapbox、OpenLayers 等）。

GeoJSON 基本结构

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [102.0, 0.5]
      },
      "properties": {
        "name": "My Place",
        "category": "Restaurant"
      }
    }
  ]
}

常用类型

type说明
Point单个坐标点 [lng, lat]
LineString连续线坐标集合
Polygon多边形区域
Feature带属性的地理对象
FeatureCollection多个 Feature 集合

示例：在 Vue + Leaflet 中加载

import L from 'leaflet';
import geojsonData from './data.geojson';

mounted() {
  const map = L.map('map').setView([0, 0], 2);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
  L.geoJSON(geojsonData).addTo(map);
}

五、综合表格对比

库 / 概念作用使用场景TypeScript 支持
vue-class-componentVue 组件类化用 class 写 Vue 组件✅ 原生支持
vue-property-decorator装饰器语法扩展props, watch, emit, model✅ 完美
vuex-classVuex 映射到 classstate/getters/actions/mutations✅ 装饰器映射
GeoJSON地理空间数据格式地图可视化、地图分析JSON 标准，TS 可定义接口

六、项目实践建议

  1. 推荐写法：Vue 3 + TypeScript + class-component + vue-property-decorator
    • 对大型项目可提高可维护性
  2. Vuex 管理：配合 vuex-class，减少模板中 mapState 的冗余
  3. GeoJSON 数据管理：
    • 为 Feature 创建 TypeScript 接口
    • 对不同地图组件封装统一渲染方法
  4. 调试技巧：
    • 在 VSCode 中安装 Vetur / Volar 支持 class-component 自动补全
    • 使用 @Watch 监控关键状态或地图数据变化

🔗 出站参考链接