面试题：Vue计算属性与侦听器在性能优化方面的区别

计算属性特点及适用场景

特点：
- 计算属性是基于它们的响应式依赖进行缓存的。只有在它的相关依赖发生改变时才会重新求值。
- 只要依赖的数据不变，无论多少次访问计算属性，都会立即返回之前缓存的计算结果，而不会重复执行计算函数。
适用场景：
- 当一个数据的值依赖于其他多个数据，并且这个数据不经常变化时，使用计算属性。例如，购物车中商品总价的计算，依赖于商品的单价和数量，而单价和数量可能在用户操作时才改变，这种情况下用计算属性比较合适。

侦听器特点及适用场景

特点：
- 侦听器是观察 Vue 实例上的数据变动，当被侦听的数据发生变化时，会执行相应的回调函数。
- 侦听器可以进行异步操作，例如在数据变化后发起网络请求等。
适用场景：
- 当需要在数据变化时执行异步操作或者比较复杂的业务逻辑时，适合使用侦听器。比如，当用户修改了搜索框内容，需要在数据变化后延迟一段时间发起搜索请求，以避免频繁请求服务器，这种情况就适合用侦听器。

性能优化例子

计算属性优化例子：

在一个电商商品列表页面，商品有单价 price 和数量 quantity，需要计算每个商品的总价 totalPrice。

<template>
  <div>
    <ul>
      <li v - for="(product, index) in products" :key="index">
        <p>单价: {{ product.price }}</p>
        <p>数量: {{ product.quantity }}</p>
        <p>总价: {{ product.totalPrice }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { price: 10, quantity: 2 },
        { price: 15, quantity: 3 }
      ]
    };
  },
  computed: {
    calculateTotalPrices() {
      this.products.forEach(product => {
        product.totalPrice = product.price * product.quantity;
      });
      return this.products;
    }
  },
  created() {
    this.calculateTotalPrices;
  }
};
</script>

在这个例子中，totalPrice 依赖于 price 和 quantity，使用计算属性，只有 price 或 quantity 变化时才会重新计算 totalPrice，如果只是页面渲染多次获取 totalPrice，不会重复计算，提高了性能。

侦听器优化例子：

在一个搜索框组件中，用户输入搜索关键词后，需要延迟 500ms 发起搜索请求。

<template>
  <div>
    <input v - model="searchKeyword" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      timer: null
    };
  },
  watch: {
    searchKeyword(newVal, oldVal) {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        // 这里发起搜索请求，如调用 API
        console.log('发起搜索请求，关键词为:', newVal);
      }, 500);
    }
  }
};
</script>

通过侦听器，避免了用户每次输入都立即发起请求，而是延迟执行，减少了不必要的请求，优化了性能。

星途面试题库

面试题：Vue计算属性与侦听器在性能优化方面的区别

知识考点

面试题答案

计算属性特点及适用场景

侦听器特点及适用场景

性能优化例子