什么是 「computed」

「computed」 是Vue中提供的一个计算属性。它被混入到Vue实例中，所有的getter和setter的this上下文自动的绑定为Vue实例。计算属性的结果会被缓存，除非依赖的响应式property变化才会从新计算。

「computed」 的用途

我们可以使用 「computed」 对已有的属性数据进行加工处理，得到我们的目标数据。

在TypeScript怎么用

在 「vue-class-component」 中分别为props，watch等提供了对应的装饰器，而 「computed」 却没有对应的装饰器提供。在官网 https://class-component.vuejs.org/guide/class-component.html#computed-properties 的实例中，「computed」 的功能是通过 「get」 实现的。

<template>
  <input v-model="name">
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class HelloWorld extends Vue {
  firstName = 'John'
  lastName = 'Doe'

  // Declared as computed property getter
  get name() {
    return this.firstName + ' ' + this.lastName
  }

  // Declared as computed property setter
  set name(value) {
    const splitted = value.split(' ')
    this.firstName = splitted[0]
    this.lastName = splitted[1] || ''
  }
}
</script>

另一种方案

在实际项目中，将组件修改为TypeScript后，使用 get 实现计算属性，浏览器控制台提示data是非响应式的，数据无法显示。组件js版

<template>
  <el-table border :data="data" style="width: 100%;" height="400" @selection-change="selectChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="code" label="编码"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'hierarchy-table',
  props: {
    value: {
      type: Array,
      required: true
    },
    skipCodes: {
      type: Array
    }
  },
  data() {
    return {
    };
  },
  computed: {
    data() {
      return this.skipCodes ? this.value.filter(it => !this.skipCodes.includes(it.code)) : this.value;
    }
  },
  methods: {
    selectChange(selection) {
      this.$emit('selection-change', selection);
    }
  }
};
</script>

鉴于这个问题，使用创建中间变量的方式进行解决。组件ts版

<template>
  <el-table border :data="data" style="width: 100%;" height="400" @selection-change="selectChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="code" label="编码"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
  </el-table>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component
export default class HierarchyTable extends Vue {
  data: any[] = [];

  @Prop({ type: Array, required: true }) value!: any;
  @Prop({ type: Array }) skipCodes: any;

  @Watch('value')
  valueChanged(val) {
    this.updateData();
  }

  @Watch('skipCodes')
  skipCodesChanged() {
    this.updateData();
  }

  updateData() {
    this.data = this.skipCodes ? this.value.filter(it => !this.skipCodes.includes(it.code)) : this.value;
  }

  selectChange(selection) {
    this.$emit('selection-change', selection);
  }
}
</script>

<style scoped></style>

总结

Vue+TypeScript的道路是曲折而又充满荆棘的，还有内心足够强大。哈哈

---

个人公众号：Java码农