指南
计算属性与监听器
了解 Vue2.0 响应式原理，掌握计算属性和侦听器的实用技巧
🎯 引言
学会这篇文章后，你能够理解 Vue2.0 中响应式数据的基本原理，并且掌握如何用计算属性和侦听器来让你的页面更智能、更高效。这对刚入门前端的小伙伴来说非常重要，能帮你写出更简洁、性能更好的代码。
🧱 Vue2.0 响应式是什么？
说到 Vue，你肯定听过“响应式”这个词。简单来说，响应式就是数据变化后，页面能自动更新。就像你在表单里输入内容，旁边的展示区能跟着变，这背后就是响应式在工作。
Vue2.0 是通过数据劫持和发布订阅模式实现响应式的。当你改变数据时，Vue 会通知所有使用该数据的地方，自动帮你更新视图。
⚙️ 响应式中的计算属性（computed）
计算属性是 Vue 响应式中的“聪明助手”。它们会基于已有数据计算出一个新的值，并且具有缓存功能。只有当相关数据变化时，计算属性才会重新计算。
计算属性的优势：
- 不用写重复代码，逻辑集中
- 自动缓存，性能更好
- 绑定在模板里使用更方便
示例：计算属性的简单用法
example.vue
<template>
<div>
<p>原始消息：{{ message }}</p>
<p>大写消息（计算属性）：{{ uppercaseMessage }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'hello vue',
};
},
computed: {
uppercaseMessage() {
// 只有当 message 变化时，才会重新计算
return this.message.toUpperCase();
},
},
};
</script>
计算属性适合用于基于现有数据衍生出新的数据，且需要缓存的场景。
👂 侦听器（watch）
侦听器就像是数据变化的监听器，你可以对某个数据进行“监听”，一旦这个数据变化了，侦听器里定义的函数就会执行。
侦听器适合处理异步操作或者执行开销较大的逻辑，比如请求接口等。
侦听器的应用示例
example.vue
<template>
<div>
<input v-model="question" placeholder="请输入你的问题" />
<p>答案：{{ answer }}</p>
</div>
</template>
<script>
export default {
data() {
return {
question: '',
answer: '请输入问题，稍等...',
};
},
watch: {
question(newQuestion) {
if (newQuestion.indexOf('?') === -1) {
this.answer = '问题通常需要问号哦？';
return;
}
this.answer = '正在思考...';
this.getAnswer();
},
},
methods: {
getAnswer() {
setTimeout(() => {
this.answer = '这是一个模拟的答案。';
}, 1000);
},
},
};
</script>
侦听器适合监听数据变化后执行异步操作，或者需要手动调用函数的场景。
🔍 计算属性 VS 侦听器
两者看起来都能“响应”数据变化，但适用场景不太一样。
- 计算属性：用于基于数据生成新值，且有缓存。
- 侦听器：用于观察数据变化后，执行复杂或异步操作。
想象一下，计算属性就像是一个自动计算器，侦听器则像是一个警报器，数据变化时触发特定动作。
🧾 小节总结
- Vue2.0 响应式让数据变化自动反应到视图上
- 计算属性适合基于数据生成新值，并且有缓存，性能更优
- 侦听器适合数据变化后执行异步或复杂操作
❓ 知识问答（Q&A）
Q：计算属性和侦听器的主要区别是什么？
A：计算属性是基于数据计算新值且带缓存的属性，侦听器是对数据变化做出响应执行函数，尤其适合异步处理。
Q：什么时候用计算属性，什么时候用侦听器？
A：如果需要衍生新数据，且性能要求高，选计算属性；如果需要在数据改变时执行副作用逻辑，选侦听器。
🧪 小练习
练习1
实现一个输入框，输入数字后，显示它的平方，使用计算属性完成。
<template>
<div>
<input v-model="num" type="number" placeholder="输入数字" />
<p>平方结果：{{ square }}</p>
</div>
</template>
<script>
export default {
data() {
return {
num: 0,
};
},
computed: {
// 在这里写计算属性 square
},
};
</script>
练习2
实现一个输入框，输入文字时，如果文字长度超过 10，显示警告提示，使用侦听器完成。
<template>
<div>
<input v-model="text" placeholder="请输入内容" />
<p v-if="warning" style="color: red;">内容过长！</p>
</div>
</template>
<script>
export default {
data() {
return {
text: '',
warning: false,
};
},
watch: {
// 侦听 text，实现长度判断和设置 warning
},
};
</script>
🎉 恭喜你已经掌握 Vue2.0 响应式、计算属性和侦听器技能啦！