typescript - 如何使用 TypeScript 在 Vue.js 中使用计算 Prop ？

Question

关于如何使用 JavaScript 语言与 Vue.js 交互的文档有很多，关于 TypeScript 的文档也很少。问题是，如果 vue 组件是用 TypeScript 编写的，您如何定义 computed 属性？

根据official example , computed 是一个具有函数的对象，这些函数将根据它们的依赖属性进行缓存。

这是我做的一个例子:

import Vue from 'vue';
import { Component } from "vue-property-decorator";

@Component({})
export default class ComputedDemo extends Vue {
    private firstName: string = 'John';
    private lastName: string = 'Doe';
    private computed: object = {
        fullName(): string {
            return `${this.firstName} ${this.lastName}`;
        },
    }
}

和 html:

<div>
    <h1>Computed props ts demo</h1>
    <ul>
        <li>First name: {{firstName}}</li>
        <li>Last name: {{lastName}}</li>
        <li>Together: {{fullName}}</li>
    </ul>
</div>

第三个列表项什么都不输出。谁能告诉我在这种情况下如何定义computed？

Answer 1

您可以使用属性访问器来声明计算属性。参见 Vue Class Component .一旦您输入输入， setter/getter 就会被触发。

例如:

<template>
    <div>
        <input type="text" name="Test Value" id="" v-model="text">

        <label>{{label}}</label>
    </div>

</template>

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

@Component({})
export default class About extends Vue {
    private text = "test";

    get label() {
        return this.text;
    }
}
</script>

---

Vue Composition API 更新

<template>
  <div>
    <input type="text" name="Test Value" id v-model="text" />

    <label>{{label}}</label>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from "@vue/composition-api";

export default defineComponent({
  setup() {
    const text = ref("test");

    const label = computed(() => {
      return text.value;
    });

    return {
      text,
      label
    };
  }
});
</script>