3.1.3 只读属性与存取器

在TypeScript与Vue的联合开发中，理解并掌握只读属性和存取器（Accessors）的概念对于构建健壮、可维护的应用程序至关重要。这一节将深入探讨如何在TypeScript中定义只读属性，以及如何利用存取器来封装和控制对对象属性的访问，进而在Vue组件中优雅地应用这些概念。

3.1.3.1 只读属性的概念与应用

3.1.3.1.1 只读属性的定义

只读属性是指一旦对象被创建后，其值便不能被重新赋值的属性。在TypeScript中，你可以使用readonly关键字来声明一个只读属性。这种属性在对象实例化之后就不能被修改，这有助于保护对象的状态不被意外篡改，从而增强代码的健壮性和可预测性。

class Person {
  readonly name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name; // 正确：在构造函数中赋值
    this.age = age;
  }
  changeAge(newAge: number) {
    this.age = newAge; // 正确：age是可变的
    // this.name = "newName"; // 错误：name是只读的，不能在此处修改
  }
}
const person = new Person("Alice", 30);
console.log(person.name); // Alice
// person.name = "Bob"; // 错误：不能重新赋值给只读属性

3.1.3.1.2 Vue组件中的只读属性

在Vue组件中，虽然TypeScript的readonly关键字不直接应用于Vue的响应式数据（因为Vue使用自己的响应式系统），但你可以通过计算属性（Computed Properties）或getters来模拟只读属性的行为。

<template>
  <div>
    <p>{{ fullName }}</p>
    <!-- 尝试修改fullName将导致错误，因为它没有setter -->
    <!-- <button @click="fullName = 'New Name'">Change Name</button> -->
  </div>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
export default defineComponent({
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName(): string {
      return `${this.firstName} ${this.lastName}`;
    }
    // 注意：这里fullName是一个计算属性，没有setter，因此它是“只读”的
  }
});
</script>

3.1.3.2 存取器的概念与应用

3.1.3.2.1 存取器的定义

存取器（Accessors）是一种特殊的方法，用于拦截对对象属性的访问和修改。在TypeScript中，你可以通过get和set关键字来定义存取器。get存取器用于获取属性值，而set存取器则用于设置属性值。这种方式允许你在属性值被访问或修改时执行自定义的逻辑，如验证、格式化或记录日志。

class Counter {
  private _count = 0;
  get count(): number {
    console.log('Get count');
    return this._count;
  }
  set count(value: number) {
    if (value < 0) {
      throw new Error('Count cannot be negative');
    }
    console.log('Set count to ' + value);
    this._count = value;
  }
}
const counter = new Counter();
console.log(counter.count); // 输出: Get count 并返回 0
counter.count = 5; // 输出: Set count to 5
console.log(counter.count); // 再次输出: Get count 并返回 5

3.1.3.2.2 Vue组件中的存取器

在Vue组件中，虽然不直接使用TypeScript的get和set存取器语法来定义数据属性，但Vue的计算属性和侦听器（watchers）提供了类似的功能。计算属性可以视为自动的get存取器，而侦听器则可以用于模拟set存取器中的逻辑。

<template>
  <div>
    <p>{{ formattedMessage }}</p>
    <button @click="setMessage('Hello Vue!')">Change Message</button>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
  setup() {
    const rawMessage = ref('');
    const formattedMessage = computed(() => {
      // 类似于get存取器
      return rawMessage.value.toUpperCase();
    });
    function setMessage(newMessage: string) {
      // 类似于set存取器中的逻辑
      if (!newMessage) {
        console.error('Message cannot be empty');
        return;
      }
      rawMessage.value = newMessage;
    }
    return {
      formattedMessage,
      setMessage
    };
  }
});
</script>

在上面的Vue组件示例中，formattedMessage是一个计算属性，它根据rawMessage的值动态生成并返回大写格式的消息，类似于一个get存取器。而setMessage函数则用于更新rawMessage的值，并在更新前执行验证逻辑，这类似于set存取器中的逻辑。

3.1.3.3 小结

通过本节的学习，我们深入理解了TypeScript中的只读属性和存取器的概念及其在Vue组件中的应用。只读属性通过readonly关键字确保了对象状态的不可变性，增强了代码的健壮性。存取器则提供了一种灵活的方式来封装和控制对对象属性的访问，允许在属性被访问或修改时执行自定义逻辑。在Vue组件中，我们可以利用计算属性和侦听器来模拟这些行为，从而在不牺牲Vue响应式系统优势的前提下，实现类似的功能。掌握这些概念将帮助你构建更加安全、可维护和易于理解的Vue应用程序。