【Vue.js基础教程】第4章 vue计算属性computed和侦听器watch的使用方法

【Vue.js基础教程】第4章 vue计算属性和侦听器的使用方法

欢迎关注 『Vue.js基础入门教程』 专栏，持续更新中

标签：Vue.js、计算属性、侦听器、响应式编程

今天我们来聊聊 Vue.js 中的两大好用特性：计算属性和侦听器，很多人用 Vue 的时候会下意识写很多重复逻辑的代码，其实计算属性和侦听器可以帮我们避免这些麻烦。不管是优化模板复杂度，还是处理数据变动带来的逻辑操作，它们都能发挥超出你预期的作用。

在这里插入图片描述

计算属性和侦听器

在开发过程中，如果你遇到需要在模板中显示复杂逻辑处理的值，或者需要动态响应数据变化时更新状态，计算属性和侦听器绝对是你的好帮手。

计算属性

为什么需要计算属性？

假如你在模板中需要显示一个字符串的翻转结果，你可能会写这样一段代码：

<div id="example">{{ message.split('').reverse().join('') }}</div>

虽然能实现效果，但问题显而易见：模板逻辑复杂，不易维护。如果这个翻转逻辑需要多次使用，那重复代码的出现几乎无法避免。这种情况，计算属性的优势就显现了。

基础例子

让我们看看使用计算属性后的代码改进：

<div id="example">
  <p>原始信息: "{{ message }}"</p>
  <p>计算后的信息: "{{ reversedMessage }}"</p>
</div>

new Vue({
  el: '#example',
  data: {
    message: 'Hello Vue.js'
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
});

结果：

• 原始信息: “Hello Vue.js”
• 计算后的信息: “sj.euV olleH”

在这个例子中，reversedMessage 是一个计算属性。每次访问它时，Vue 会基于它的响应式依赖（即 message）自动更新，而无需手动调用。

计算属性 vs 方法

计算属性和方法都能实现类似的效果，但计算属性有缓存功能。如果 message 没有改变，访问 reversedMessage 会直接返回之前的结果，不会重新执行逻辑。而方法则会每次调用时都重新执行。

侦听器

为什么需要侦听器？

虽然计算属性可以应对大部分场景，但当需要监听数据变化并执行一些异步或开销较大的操作时，侦听器是更好的选择。例如，你输入一个问题并希望从外部 API 获取答案：

<div id="watch-example">
  <p>请输入你的问题：<input v-model="question"></p>
  <p>{{ answer }}</p>
</div>

new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: '请先输入一个问题!'
  },
  watch: {
    question(newQuestion) {
      this.answer = '正在思考中...';
      this.getAnswer();
    }
  },
  methods: {
    getAnswer() {
      if (!this.question.endsWith('?')) {
        this.answer = '问题需要以问号结尾哦!';
        return;
      }

      // 模拟异步 API 请求
      setTimeout(() => {
        this.answer = '这是一个示例答案!';
      }, 1000);
    }
  }
});

在这个例子中，侦听器会实时观察 question 的变化并作出响应，同时实现了异步操作，计算属性则无法处理这种情况。

计算属性和侦听器的选择

• 使用计算属性：如果你的需求是基于响应式依赖计算一个值。
• 使用侦听器：当需要在数据变化时执行异步任务或复杂逻辑，比如调用 API、节流等。

总结

掌握计算属性和侦听器的用法，是写好 Vue 应用的重要基础。理解它们的区别和适用场景，不仅能提升代码可读性，还能让项目更高效地运行。希望这篇文章对你有帮助！如果有疑问或者建议，欢迎评论交流😊