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

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

news 来源：原创 2025/5/21 6:16:25

引言

在前几天的学习中，我们已经了解了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>

结论

今天我们深入探讨了计算属性和侦听器的用法及其优势。这两个特性是Vue.js中非常重要的概念，能够帮助我们更高效地管理和响应数据的变化。在后续的学习中，我们将继续探索Vue 3的其他核心特性，提升我们的开发能力。

引言