面试题：Vue中计算属性与侦听器在数据缓存场景的应用区别

计算属性的优势及示例

优势：
- 计算属性会基于它的依赖进行缓存，只有在它的依赖响应式数据发生改变时才会重新计算。这对于复杂且不经常变化的数据计算逻辑非常高效，避免了不必要的重复计算。
- 计算属性更适合处理多个响应式数据之间的关系并得出一个最终的值，它的返回值可以像普通数据一样在模板中使用，代码简洁直观。
示例：假设在Vue组件中有两个响应式数据firstName和lastName，需要计算出完整的姓名fullName。

<template>
  <div>
    <input v-model="firstName">
    <input v-model="lastName">
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: ''
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

侦听器的优势及示例

优势：
- 侦听器可以监听一个特定数据的变化，并在数据变化时执行副作用操作，比如发送HTTP请求、操作DOM等。它更侧重于在数据变化时执行特定的行为，而不仅仅是计算一个值。
- 侦听器可以进行异步操作，这对于计算属性来说是不支持的。
示例：假设在Vue组件中有一个响应式数据searchText，当searchText变化时，需要发送一个HTTP请求去搜索相关数据。

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchText: ''
    };
  },
  watch: {
    searchText: {
      immediate: true, // 初始化时就执行
      handler(newValue, oldValue) {
        axios.get('/search', { params: { q: newValue } })
         .then(response => {
            // 处理搜索结果
            console.log(response.data);
          })
         .catch(error => {
            console.error('搜索出错:', error);
          });
      }
    }
  }
};
</script>

星途面试题库

面试题：Vue中计算属性与侦听器在数据缓存场景的应用区别

知识考点

面试题答案

计算属性的优势及示例

侦听器的优势及示例