3.1.3 只读属性与存取器 -TypeScript和Vue从入门到精通(一)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(一)

### 3.1.3 只读属性与存取器

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

#### 3.1.3.1 只读属性的概念与应用

**3.1.3.1.1 只读属性的定义**

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

```typescript
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来模拟只读属性的行为。

```vue
<template>
  <div>
    <p>{{ fullName }}</p>
    
    
  </div>
</template>

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`存取器则用于设置属性值。这种方式允许你在属性值被访问或修改时执行自定义的逻辑，如验证、格式化或记录日志。

```typescript
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`存取器中的逻辑。

```vue
<template>
  <div>
    <p>{{ formattedMessage }}</p>
    <button @click="setMessage('Hello Vue!')">Change Message</button>
  </div>
</template>

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应用程序。

该分类下的相关小册推荐：

TypeScript和Vue从入门到精通(二)

Vue.js从入门到精通(四)

Vue.js从入门到精通(三)

TypeScript和Vue从入门到精通(五)

vuejs组件实例与底层原理精讲

Vue3技术解密

VUE组件基础与实战

Vue原理与源码解析

Vue.js从入门到精通(二)

TypeScript和Vue从入门到精通(四)

移动端开发指南

Vue.js从入门到精通(一)