Vue.js中的计算属性和侦听器有何区别？它们应该在什么情况下使用？

Vue.js中的计算属性和侦听器是用来响应数据变化的两种不同方式。

计算属性是一个函数，它会根据其依赖的数据的变化而自动更新。计算属性通常用于处理需要进行复杂计算的数据，或者是需要缓存的数据。

例如，我们有一个数组，需要计算出其中所有元素的和。可以使用计算属性来实现：

<template>
  <div>
    <p>{{ numbers }}</p>
    <p>{{ sum }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numbers: [1, 2, 3, 4, 5]
    }
  },
  computed: {
    sum() {
      return this.numbers.reduce((acc, cur) => acc + cur, 0)
    }
  }
}
</script>

侦听器则是一个函数，它会在依赖的数据发生变化时被调用。侦听器通常用于处理需要进行异步操作或复杂逻辑的数据。

例如，我们有一个输入框，需要根据用户输入的内容进行实时搜索。可以使用侦听器来实现：

<template>
  <div>
    <input v-model="search" />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "Apple" },
        { id: 2, name: "Banana" },
        { id: 3, name: "Orange" },
        { id: 4, name: "Pear" },
        { id: 5, name: "Pineapple" }
      ],
      search: ""
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.name.toLowerCase().includes(this.search.toLowerCase()))
    }
  },
  watch: {
    search(newValue, oldValue) {
      console.log(`Search changed from ${oldValue} to ${newValue}`)
    }
  }
}
</script>

在这个例子中，计算属性被用于过滤数据，侦听器被用于监听用户输入的变化。