前端面试题146（详解vue中计算属性）

Vue.js中的计算属性（Computed Properties）是一种非常实用的功能，它允许你基于响应式依赖进行数据的计算，并且Vue会自动管理这些依赖关系，当依赖的数据发生变化时，计算属性的值也会随之更新，进而触发视图的更新。这使得我们可以保持模板的简洁性，同时又能够处理复杂的逻辑。

基本概念

计算属性是Vue实例的一个属性，它的值是通过函数计算得出的。与方法不同，计算属性的结果会被缓存起来，只有当依赖的数据变化时才会重新计算。这个特性使得在一些性能敏感的场景下，计算属性比方法更具优势。

声明计算属性

在Vue组件的computed选项中声明计算属性。计算属性是一个具有getter（获取器）功能的对象，你可以像访问普通属性那样访问它们，但背后其实是执行了一个函数来获取结果。

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    // 计算全名
    fullName: {
      get() {
        // 当firstName或lastName改变时，fullName会自动更新
        return this.firstName + ' ' + this.lastName;
      }
    }
  }
}

在这个例子中，fullName就是一个计算属性，它依赖于firstName和lastName。当你在模板中使用{{ fullName }}时，Vue会自动调用对应的getter方法并缓存结果，直到依赖的firstName或lastName发生变化。

计算属性VS方法

虽然计算属性和方法都可以用来处理数据并返回结果，但它们之间有几点关键区别：

1. 缓存：计算属性是基于它们的依赖进行缓存的，只有当依赖发生变化时才会重新计算。而方法每次调用都会执行函数。
2. 读取vs修改：计算属性更适合用于数据的读取场景，如果你需要一个可以修改的属性，那么应该使用methods或者直接操作data中的属性。
3. 语法糖：在模板中，计算属性可以直接通过属性名访问，而方法需要加括号调用，如{{ fullName() }}（虽然不推荐这样做，因为没有利用到计算属性的缓存特性）。

总结

计算属性是Vue中处理复杂数据逻辑、提高应用性能的重要工具。它们让数据处理逻辑更加清晰，同时利用Vue的响应式系统自动管理数据依赖，确保视图的高效更新。在设计Vue应用时，合理利用计算属性可以极大地提升代码的可维护性和执行效率。