Вычисляемые свойства в Vue.js позволяют определять динамические свойства на основе состояния других свойств в экземпляре Vue. Используя TypeScript с Vue, мы можем использовать возможности статической типизации, чтобы улучшить процесс разработки и выявить потенциальные ошибки на ранних этапах. В этой статье мы рассмотрим различные методы использования вычисляемых свойств в Vue.js с TypeScript, а также приведем примеры кода.

Метод 1: базовое вычисляемое свойство

<template>
  <div>
    <p>The sum of {{ number1 }} and {{ number2 }} is {{ sum }}</p>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
@Component
export default class MyComponent extends Vue {
  number1: number = 5;
  number2: number = 10;
  get sum(): number {
    return this.number1 + this.number2;
  }
}
</script>

В этом примере у нас есть два числа, number1и number2, а также вычисляемое свойство sum, которое вычисляет сумму этих двух чисел.. Доступ к свойству sumв шаблоне осуществляется с помощью интерполяции.

Метод 2: вычисляемый сеттер

<template>
  <div>
    <input v-model="fullName" placeholder="Enter your full name" />
    <p>Your first name is {{ firstName }}</p>
    <p>Your last name is {{ lastName }}</p>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
@Component
export default class MyComponent extends Vue {
  fullName: string = '';
  get firstName(): string {
    return this.fullName.split(' ')[0];
  }
  set firstName(value: string) {
    const lastName = this.fullName.split(' ')[1] || '';
    this.fullName = `${value} ${lastName}`;
  }
  get lastName(): string {
    return this.fullName.split(' ')[1] || '';
  }
  set lastName(value: string) {
    const firstName = this.fullName.split(' ')[0];
    this.fullName = `${firstName} ${value}`;
  }
}
</script>

В этом примере у нас есть поле ввода, привязанное к свойству fullNameс помощью v-model. Мы определяем вычисляемые свойства firstNameи lastNameдля извлечения имени и фамилии из строки fullName. Мы также определяем методы установки для firstNameи lastNameдля обновления свойства fullNameпри изменении соответствующих вычисляемых свойств.

Метод 3: вычисляемое свойство с помощью Watcher

<template>
  <div>
    <input v-model="quantity" type="number" />
    <p>Total price: {{ totalPrice }}</p>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator';
@Component
export default class MyComponent extends Vue {
  quantity: number = 1;
  price: number = 10;
  totalPrice: number = this.quantity * this.price;
  @Watch('quantity')
  onQuantityChange(newQuantity: number, oldQuantity: number) {
    this.totalPrice = newQuantity * this.price;
  }
}
</script>

В этом примере у нас есть поле ввода, привязанное к свойству quantity, и вычисляемое свойство totalPrice, которое вычисляет общую цену на основе количества и цены. Мы используем наблюдатель для обновления totalPriceпри каждом изменении quantity.

Вычисляемые свойства в Vue.js с помощью TypeScript предоставляют мощный механизм для получения динамических свойств на основе других свойств в экземпляре Vue. Мы исследовали различные методы использования вычисляемых свойств, включая базовые вычисляемые свойства, вычисляемые методы установки и вычисляемые свойства с наблюдателями. Используя статическую типизацию TypeScript, мы можем улучшить рабочий процесс разработки и выявить потенциальные ошибки на ранних этапах.