Vue2 入门指南06：计算属性和监听器的使用
在 Vue.js 开发中，计算属性（computed）和监听器（watch）是两个重要的工具。它们能够帮助我们更优雅地处理复杂逻辑、优化性能，以及在数据变化时自动执行相关操作。本篇将详细讲解它们的使用方法和区别。
一、计算属性（Computed）
计算属性是基于响应式数据生成的动态值。它们会被缓存，只有在依赖的数据发生变化时才会重新计算。
1. 基本使用
计算属性通常定义在 Vue 实例的 computed 选项中，并像普通数据一样在模板中使用。
<div id="app">
<p>原始值：{{ number }}</p>
<p>计算属性（平方）：{{ squaredNumber }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
number: 5
},
computed: {
squaredNumber() {
return this.number * this.number;
}
}
});
</script>
运行结果：
原始值：5
计算属性（平方）：25
2. 使用计算属性进行格式化
<div id="app">
<p>原始日期：{{ date }}</p>
<p>格式化日期：{{ formattedDate }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
date: '2024-12-03'
},
computed: {
formattedDate() {
const options = { year: 'numeric', month: 'long', day: 'numeric' };
return new Date(this.date).toLocaleDateString(undefined, options);
}
}
});
</script>
运行结果：
原始日期：2024-12-03
格式化日期：December 3, 2024
二、监听器（Watch）
监听器用于观察数据的变化并在变化时执行自定义逻辑，适合用于异步操作或较大开销的任务。
1. 基本使用
watch 选项中定义的方法会在被监听的数据变化时触发。
<div id="app">
<input v-model="message" placeholder="输入内容">
<p>输入的内容是：{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: ''
},
watch: {
message(newVal, oldVal) {
console.log(`内容从 "${oldVal}" 变为 "${newVal}"`);
}
}
});
</script>
运行效果：
- 每次修改输入框内容，都会在控制台打印旧值和新值。
2. 深度监听（deep）
对于嵌套对象，默认情况下 watch 不会监听深层次变化。如果需要深度监听，可以设置 deep: true。
<div id="app">
<button @click="changeData">修改嵌套对象</button>
</div>
<script>
new Vue({
el: '#app',
data: {
nested: {
key: 'value'
}
},
watch: {
nested: {
handler(newVal) {
console.log('嵌套对象发生变化：', newVal);
},
deep: true
}
},
methods: {
changeData() {
this.nested.key = 'new value';
}
}
});
</script>
三、计算属性与监听器的区别
| 功能 | 计算属性（computed） | 监听器（watch） |
|---|---|---|
| 适用场景 | 数据派生和模板展示 | 数据变化触发逻辑处理 |
| 是否缓存 | 是 | 否 |
| 性能表现 | 优秀，只有依赖数据变化时触发计算 | 可能多次触发 |
| 典型用途 | 格式化、计算、动态绑定 | 异步请求、复杂任务处理 |
总结：
- 如果目标是派生数据用于展示，优先使用计算属性。
- 如果需要对数据变化执行副作用操作，比如调用接口，使用监听器。
四、计算属性的 Getter 和 Setter
计算属性不仅可以定义 getter 方法，还可以定义 setter，实现双向绑定的自定义逻辑。
示例：带 Setter 的计算属性
<div id="app">
<input v-model="fullName" placeholder="输入全名">
<p>名字：{{ firstName }}</p>
<p>姓氏：{{ lastName }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '三'
},
computed: {
fullName: {
get() {
return `${this.firstName} ${this.lastName}`;
},
set(value) {
const parts = value.split(' ');
this.firstName = parts[0];
this.lastName = parts[1] || '';
}
}
}
});
</script>
运行结果：
- 输入框绑定的是
fullName，但修改全名时，firstName和lastName会自动更新。
五、小结
- 计算属性（computed）：适用于依赖现有数据派生新数据，带有缓存特性。
- 监听器（watch）：适用于处理异步任务或监控数据变化的副作用逻辑。
- 它们各有用武之地，可以帮助我们更高效地管理和响应数据变化。
接下来的章节，我们将介绍如何在 Vue2 中使用指令操作 DOM，敬请期待！
