Vue 3 30天精进之旅：Day 04 - 计算属性与侦听器

引言

在前几天的学习中，我们已经了解了Vue实例的基本概念和使用方法。今天，我们将深入探讨两个重要的特性：计算属性（computed properties）和侦听器（watchers）。这两个特性使得我们能够更高效地管理和响应数据变化，从而提升应用的性能和可维护性。

1. 计算属性（Computed Properties）

计算属性是基于已有数据进行计算并返回结果的属性。与普通属性不同，计算属性会根据其依赖的响应式数据进行缓存，只有在相关依赖发生变化时，它们才会重新计算。这种特性使得计算属性在性能上具有优势，尤其是在处理复杂逻辑时。

1.1 使用计算属性

在Vue组件中，你可以在computed属性中定义计算属性。以下是一个简单的示例：

<template>
  <div>
    <h1>姓名: {
  
  { firstName }} {
  
  { lastName }}</h1>
    <h2>全名: {
  
  { fullName }}</h2>
    <input v-model="firstName" placeholder="输入名" />
    <input v-model="lastName" placeholder="输入姓" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: '',
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },
};
</script>

1.2 代码解析