1. 响应式数据处理的核心工具

在 Vue.js 中，计算属性和侦听器是处理数据变化的两大核心机制。它们的核心区别在于：

• 计算属性：基于依赖关系自动缓存结果，适合复杂逻辑计算
• 侦听器：监听数据变化并触发回调，适合异步操作或副作用处理

2. 计算属性（Computed Properties）

2.1 基础用法

<template>
  <div>
    <p>单价：{{ price }}</p>
    <p>数量：{{ quantity }}</p>
    <p>总价：{{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { price: 10, quantity: 5 };
  },
  computed: {
    totalPrice() {
      return this.price * this.quantity;
    }
  }
};
</script>

2.2 核心特性

1. 缓存机制：仅当依赖变化时重新计算
2. 多依赖支持：可依赖多个响应式数据
3. 可写性：支持 get/set 方法（需谨慎使用）

2.3 最佳实践

• 复杂逻辑封装：将多步计算合并为计算属性
• 模板简化：直接在模板中使用计算属性而非表达式

3. 侦听器（Watchers）

3.1 基础用法

<template>
  <input v-model="keyword" placeholder="搜索..." />
  <p>搜索结果：{{ result }}</p>
</template>

<script>
export default {
  data() {
    return { keyword: '', result: '' };
  },
  watch: {
    keyword(newVal) {
      // 模拟异步搜索
      setTimeout(() => {
        this.result = `搜索结果：${newVal}`;
      }, 500);
    }
  }
};
</script>

3.2 高级特性

1. 深度监听：deep: true 监测对象属性变化
2. 立即执行：immediate: true 初始化时触发
3. 字符串方法名：支持直接引用 methods 方法

3.3 适用场景

• 异步操作：如 API 请求、定时器
• 副作用处理：如 DOM 操作、状态变更
• 跨组件通信：通过 $emit 触发父组件更新

4. 关键对比与选择策略

选择建议：

• 优先使用计算属性，除非需要：
  • 执行异步操作
  • 处理副作用（如 API 调用）
  • 监听对象深层属性变化

5. 综合应用示例

<template>
  <div>
    <div>
      <p>原价：{{ originalPrice }}</p>
      <p>折扣：{{ discount }}%</p>
      <p>折后价：{{ discountedPrice }}</p>
    </div>
    
    <div>
      <input v-model="searchQuery" placeholder="搜索..." />
      <p>搜索结果：{{ searchResult }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalPrice: 200,
      discount: 80,
      searchQuery: '',
      searchResult: ''
    };
  },
  
  computed: {
    discountedPrice() {
      return (this.originalPrice * this.discount) / 100;
    }
  },
  
  watch: {
    searchQuery: {
      handler(newVal) {
        this.fetchSearchResults(newVal);
      },
      immediate: true, // 初始化时执行
      deep: true       // 监听对象变化
    }
  },
  
  methods: {
    fetchSearchResults(query) {
      // 模拟 API 调用
      setTimeout(() => {
        this.searchResult = `查询结果：${query}`;
      }, 1000);
    }
  }
};
</script>

6. 性能优化技巧

1. 计算属性缓存：避免在计算属性中调用方法或引入非响应式数据
2. 侦听器防抖：高频触发场景使用防抖函数

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

3. 避免过度监听：只监听必要的数据变化

7. 总结

• 计算属性：适合“推导数据”，利用缓存提升性能
• 侦听器：适合“响应变化”，处理异步或副作用操作
• 组合使用：复杂场景中两者可协同工作

#Vue.js #计算属性 #侦听器 #响应式编程
本文由 [码说数字化] 原创，转载请注明出处。