【知识陷阱】VUE 计算属性的常见误区与陷阱

误区：过度使用计算属性

开发人员经常过度使用计算属性，将简单的逻辑或数据转换放在计算属性中。这会增加 Vue 的渲染负担，导致性能问题。相反，应只在需要缓存派生数据的场景中使用计算属性。

// 误区：过度使用计算属性
computed: {
  uppercaseName() {
    return this.name.toUpperCase();
  }
}

误区：将方法放在计算属性中

计算属性专用于缓存派生数据，不应包含任何副作用或方法。如果需要执行操作或发起异步请求，请使用方法或生命周期钩子。

// 误区：将方法放在计算属性中
computed: {
  asyncData() {
    const data = await fetchAsyncData();
    return data;
  }
}

误区：使用计算属性修改数据

计算属性是只读的，不能用于修改 Vue 实例的数据。如果需要更新数据，请使用 Vue 的响应式数据特性或方法。

// 误区：使用计算属性修改数据
computed: {
  reversedName() {
    return this.name.split("").reverse().join("");
  }
}

误区：使用计算属性进行复杂计算

对于非常复杂或耗时的计算，避免使用计算属性。这些操作应转移到外部函数或 WEB Worker 中，以避免阻塞 Vue 的渲染。

// 误区：使用计算属性进行复杂计算
computed: {
  primeFactors() {
    const factors = [];
    for (let i = 2; i * i <= this.number; i++) {
      while (this.number % i === 0) {
        factors.push(i);
        this.number /= i;
      }
    }
    return factors;
  }
}

误区：计算属性依赖其他计算属性

循环引用计算属性会导致无限递归，从而导致错误。计算属性只能依赖原始数据或其他计算属性。

// 误区：计算属性依赖其他计算属性
computed: {
  fullName() {
    return this.firstName + " " + this.lastName;
  },
  reverseFullName() {
    return this.fullName.split("").reverse().join("");
  }
}

误区：在计算属性中使用 this

在计算属性中使用 this 会导致意外的行为，因为 this 的值在 Vue 实例的不同部分可能不同。应明确使用箭头函数或使用 this.$root 访问根 Vue 实例。

// 误区：在计算属性中使用 `this`
computed: {
  isCurrentUser() {
    return this === this.$store.getters.currentUser;
  }
}

误区：忽略计算属性的缓存

计算属性会缓存其结果，这通常是有益的，但如果基础数据经常更改，可能会导致过时的值。使用 invalidateCache 方法手动清除缓存或使用 watch 监控基础数据的变化。

// 忽略计算属性的缓存
computed: {
  totalTime() {
    return this.timeEntries.reduce((a, b) => a + b, 0);
  }
}

// 使用 `watch` 监控基础数据的变化
watch: {
  timeEntries() {
    this.$invalidateCache("totalTime");
  }
}

总结

计算属性是 Vue 中一种强大的工具，但使用不当也会带来挑战。通过了解常见的陷阱并遵循最佳实践，开发者可以避免这些问题并提升 Vue 应用程序的性能和可维护性。