当前位置：首页 > article >正文

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

article 2025/3/5 9:18: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 代码解析

data中定义了firstName和lastName两个属性，用于存储用户输入的名字和姓氏。
在computed中定义了fullName计算属性，它依赖于firstName和lastName。每当这两个属性发生变化时，fullName会自动更新。
在模板中，我们使用{ { fullName }}来显示计算后的全名。

1.3 计算属性的优势

缓存：计算属性会根据其依赖的响应式数据进行缓存，只有在依赖发生变化时才会重新计算。这在性能上相较于方法有明显优势。
声明式：计算属性提供了一种声明式的方式来处理复杂逻辑，使代码更加清晰易懂。

2. 侦听器（Watchers）

侦听器允许你观察和响应数据的变化。当某个数据变化时，侦听器会执行相应的回调函数。侦听器非常适合处理异步操作或数据变化时的复杂逻辑。

2.1 使用侦听器

在Vue组件中，你可以在watch属性中定义侦听器。以下是一个示例：

<template>
  <div>
    <input v-model="question" placeholder="输入问题" />
    <p>答案: {
  
  { answer }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      question: '',
      answer: '我还没有回答你的问题',
    };
  },
  watch: {
    question(newQuestion) {
      this.answer = '正在思考问题...';
      this.getAnswer(newQuestion);
    },
  },
  methods: {
    getAnswer(question) {
      // 模拟异步请求
      setTimeout(() => {
        this.answer = question + '的答案是42';
      }, 1000);
    },
  },
};
</script>

2.2 代码解析

data中定义了question和answer两个属性。
在watch中，我们为question属性设置了一个侦听器。当用户输入问题时，侦听器会执行相应的逻辑，首先将answer设置为“正在思考问题...”，然后调用getAnswer方法模拟异步请求。
getAnswer方法通过setTimeout模拟了一个异步操作，并在1秒后更新answer。

2.3 侦听器的优势

灵活性：侦听器可以对单个数据属性进行响应，适合处理复杂的业务逻辑。
异步操作：当数据变化时，可以执行异步代码，比如API请求等。

3. 计算属性与侦听器的对比

特性	计算属性	侦听器
用途	计算并返回某个值	响应数据变化并执行函数
触发方式	根据依赖的响应式数据变化自动更新	需要显式地监视特定的属性
缓存	会缓存结果，只有在依赖变化时重新计算	不会缓存，每次变化都会执行回调
使用场景	处理简单的数据转换和计算	处理异步请求、复杂逻辑和数据变化的副作用

4. 实践：构建一个简单的反馈系统

为了巩固今天所学的计算属性和侦听器的概念，我们将构建一个简单的反馈系统。用户可以输入问题，系统会根据问题显示相应的答案，并在输入变化时提供反馈。

<template>
  <div>
    <h1>反馈系统</h1>
    <input v-model="question" placeholder="输入你的问题" />
    <p>答案: {
  
  { answer }}</p>
    <p v-if="isThinking">正在思考问题...</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      question: '',
      answer: '我还没有回答你的问题',
      isThinking: false,
    };
  },
  computed: {
    formattedQuestion() {
      return this.question.trim().toLowerCase();
    },
  },
  watch: {
    formattedQuestion(newQuestion) {
      if (newQuestion) {
        this.isThinking = true;
        this.getAnswer(newQuestion);
      } else {
        this.answer = '我还没有回答你的问题';
      }
    },
  },
  methods: {
    getAnswer(question) {
      setTimeout(() => {
        this.answer = `${question} 的答案是42！`;
        this.isThinking = false;
      }, 1000);
    },
  },
};
</script>

<style>
h1 {
  color: #42b983;
}
input {
  padding: 10px;
  width: 100%;
  margin-top: 20px;
}
p {
  margin-top: 10px;
}
</style>