Vue框架之计算属性与侦听器详解

计算属性（Computed）和侦听器（Watchers）是处理数据逻辑的两种重要方式，它们都能实现数据的动态响应，但设计初衷和应用场景有所不同。

一、计算属性（Computed）：基于依赖的响应式计算

计算属性是Vue提供的一种特殊属性，它的取值由其他数据计算而来，并且具有缓存特性。

1.1 基础语法与用法

计算属性定义在computed选项中，本质是一个getter函数，返回计算结果：

new Vue({
  data() {
    return {
      firstName: '张',
      lastName: '三'
    };
  },
  computed: {
    // 完整写法（getter/setter）
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      set(newValue) {
        const names = newValue.split(' ');
        this.firstName = names[0];
        this.lastName = names[1] || '';
      }
    },
    
    // 简写（只有getter）
    reversedName() {
      return this.fullName.split(' ').reverse().join(' ');
    }
  }
});

使用方式：

<!-- 直接作为普通属性使用 -->
<p>全名：{{ fullName }}</p>
<p>反转姓名：{{ reversedName }}</p>

<!-- 可双向绑定（需定义setter） -->
<input v-model="fullName">

1.2 核心特性：缓存机制

计算属性的核心优势是缓存，只有依赖数据变化时才会重新计算：

computed: {
  expensiveComputed() {
    // 复杂计算（如遍历大型数组）
    return this.items.filter(item => item.isActive);
  }
}

特性说明：

• 若items未变化，多次访问expensiveComputed会直接返回缓存结果；
• 相比之下，方法（methods）每次调用都会重新执行函数。

1.3 适用场景

计算属性适用于：

1. 复杂逻辑的模板表达式：避免在模板中编写过多逻辑（如格式化数据、筛选列表）。
2. 需要缓存的计算：如大型列表的过滤、排序等耗时操作。
3. 基于多个数据的派生值：如根据多个状态计算表单是否可提交。

computed: {
  // 示例：表单是否可提交
  isFormValid() {
    return this.username.length > 0 && this.password.length > 0;
  }
}

二、侦听器（Watchers）：监听数据变化的响应式操作

侦听器通过watch选项监听数据变化，并在变化时执行回调函数，适合处理异步或复杂的响应逻辑。

2.1 基础语法与用法

new Vue({
  data() {
    return {
      question: '',
      answer: '等待提问...'
    };
  },
  watch: {
    // 监听question变化
    question(newValue, oldValue) {
      if (newValue) {
        // 模拟异步请求
        this.debouncedGetAnswer();
      } else {
        this.answer = '等待提问...';
      }
    }
  },
  created() {
    // 使用防抖处理频繁变化（需引入lodash）
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500);
  },
  methods: {
    getAnswer() {
      // 模拟API请求
      setTimeout(() => {
        this.answer = '这是你的答案：' + Math.random();
      }, 1000);
    }
  }
});

2.2 深度监听与立即执行

2.2.1 深度监听（deep）

监听对象内部属性变化：

watch: {
  user: {
    handler(newValue) {
      console.log('用户信息变化');
    },
    deep: true // 深度监听
  }
}

2.2.2 立即执行（immediate）

初始化时立即执行一次回调：

watch: {
  question: {
    handler(newValue) {
      this.getAnswer();
    },
    immediate: true // 立即执行
  }
}

2.3 适用场景

侦听器适用于：

1. 异步操作：如监听用户输入并发起API请求（搜索联想）。
2. 复杂的副作用：如监听路由变化后滚动到页面顶部。
3. 跨组件通信：如父组件监听子组件的状态变化。

watch: {
  // 监听路由变化
  '$route'(to, from) {
    window.scrollTo(0, 0); // 滚动到顶部
  }
}

三、计算属性 vs 侦听器

3.1 核心对比

3.2 选择原则

• 优先使用计算属性：当一个值依赖于其他值，且需要缓存时（如数据格式化、列表过滤）。
• 使用侦听器：当需要在数据变化时执行异步操作（如API请求）或复杂逻辑（如多步操作）。

错误示例：用watch实现计算属性功能（无缓存，性能差）

// 不推荐：用watch实现计算属性功能
watch: {
  firstName() {
    this.fullName = `${this.firstName} ${this.lastName}`;
  },
  lastName() {
    this.fullName = `${this.firstName} ${this.lastName}`;
  }
}

正确示例：用计算属性实现

computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

四、高级技巧与最佳实践

4.1 计算属性的setter使用场景

计算属性默认只有getter，但在需要双向绑定时可定义setter：

computed: {
  selectedIds: {
    get() {
      return this.items.filter(item => item.selected).map(item => item.id);
    },
    set(ids) {
      this.items.forEach(item => {
        item.selected = ids.includes(item.id);
      });
    }
  }
}

4.2 侦听器的优化：防抖与节流

处理高频变化（如输入框输入）时，使用防抖（debounce）或节流（throttle）避免频繁执行：

// 使用lodash的debounce
import debounce from 'lodash/debounce';

export default {
  watch: {
    searchQuery: debounce(function(newVal) {
      this.fetchData(newVal);
    }, 300)
  }
}

4.3 监听对象属性变化的正确方式

4.3.1 监听单个深层属性

watch: {
  'user.name'(newVal) {
    console.log('用户名变化');
  }
}

4.3.2 监听整个对象（深度监听）

watch: {
  user: {
    handler(newVal) {
      console.log('用户对象变化');
    },
    deep: true
  }
}

五、Vue 3 Composition API中的使用方式

Vue 3的Composition API提供了computed和watch函数，用法与Options API类似，但组织方式更灵活：

5.1 计算属性（computed）

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    
    // 只读计算属性
    const doubleCount = computed(() => count.value * 2);
    
    // 可写计算属性
    const fullName = computed({
      get() {
        return `${firstName.value} ${lastName.value}`;
      },
      set(newValue) {
        const [first, last] = newValue.split(' ');
        firstName.value = first;
        lastName.value = last;
      }
    });
    
    return {
      count,
      doubleCount,
      fullName
    };
  }
};

5.2 侦听器（watch）

import { ref, watch } from 'vue';

export default {
  setup() {
    const question = ref('');
    const answer = ref('等待提问...');
    
    // 基本监听
    watch(question, (newVal, oldVal) => {
      if (newVal) {
        fetchAnswer(newVal);
      }
    });
    
    // 深度监听对象
    const user = ref({ name: '张三', age: 20 });
    watch(user, (newVal) => {
      console.log('用户变化');
    }, { deep: true });
    
    // 监听多个源
    watch([question, user], ([newQuestion, newUser]) => {
      // 处理变化
    });
    
    return {
      question,
      answer,
      user
    };
  }
};

六、常见问题与避坑指南

6.1 计算属性中避免异步操作

计算属性应保持纯粹的同步计算，异步操作会导致缓存失效且结果不可预测：

// 错误：计算属性中使用异步操作
computed: {
  async apiData() {
    return await fetch('/api/data'); // 错误！
  }
}

// 正确：使用watch或methods处理异步
methods: {
  async fetchData() {
    this.apiData = await fetch('/api/data');
  }
}

6.2 避免在watch中循环触发更新

// 错误：watch中修改监听的属性，导致循环触发
watch: {
  count(newVal) {
    this.count = newVal + 1; // 循环触发watch
  }
}

// 正确：使用计算属性或条件判断
computed: {
  incrementedCount() {
    return this.count + 1;
  }
}

6.3 深度监听的性能问题

深度监听（deep: true）会递归遍历对象所有属性，对大型对象性能影响显著：

// 不推荐：直接深度监听大型对象
watch: {
  largeObject: {
    handler() { /* 处理逻辑 */ },
    deep: true // 性能问题！
  }
}

// 推荐：监听特定属性
watch: {
  'largeObject.specificField'(newVal) { /* 处理逻辑 */ }
}

总结：合理选择计算属性与侦听器

1. 计算属性：

• 声明式地计算派生值；
• 需要缓存以提高性能的场景；
• 复杂逻辑从模板中分离。

2. 侦听器：

• 监听数据变化执行副作用（如异步请求、DOM操作）；
• 处理复杂的多步操作；
• 监听路由、props等非data属性的变化。

若这篇内容帮到你，动动手指支持下！关注不迷路，干货持续输出！
ヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉ