vue计算属性实现

计算属性的基本概念

计算属性是Vue中用于声明式地处理复杂逻辑的响应式属性。它们基于依赖的响应式数据进行缓存，只在相关依赖发生改变时才会重新计算，适合处理需要复杂计算或频繁更新的数据。

基本语法结构

在Vue组件选项中通过computed字段定义计算属性：

export default {
  computed: {
    propertyName() {
      // 计算逻辑
      return computedValue;
    }
  }
}

计算属性的典型实现

计算属性可以依赖多个响应式数据源：

data() {
  return {
    firstName: '张',
    lastName: '三'
  }
},
computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

带setter的计算属性

计算属性默认只有getter，但也可以提供setter：

computed: {
  fullName: {
    get() {
      return `${this.firstName} ${this.lastName}`;
    },
    set(newValue) {
      const names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[1] || '';
    }
  }
}

计算属性缓存特性

计算属性会基于它们的响应式依赖进行缓存，相同依赖多次访问只会计算一次：

computed: {
  now() {
    // 每次访问都会返回相同值
    return Date.now();
  }
}

计算属性与方法对比

计算属性与方法的关键区别在于缓存机制：

methods: {
  getFullName() {
    // 每次调用都会执行
    return `${this.firstName} ${this.lastName}`;
  }
}

计算属性与侦听器对比

计算属性更适合处理派生状态，而watch更适合执行异步或开销较大的操作：

watch: {
  firstName(newVal) {
    // 响应firstName变化执行操作
  }
}

计算属性的最佳实践

计算属性应保持纯净，避免产生副作用。复杂计算可以拆分为多个计算属性，提高可维护性。对于需要重新计算但不需缓存的值，使用方法代替计算属性更合适。