掌握Vue计算属性的应用

随着前端开发的发展，Vue 已经成为了前端开发的主流框架之一。在 Vue 中，计算属性是一个非常重要的概念，它可以让我们更好地管理数据和逻辑，让代码更加简洁易懂。

计算属性的定义

计算属性是 Vue 中一个非常重要的概念，它允许我们基于现有的数据计算出一个新的数据，这个新的数据可以被其他组件使用。计算属性本质上是一个方法，它和其它方法的区别在于，计算属性是一个有缓存的方法，它只有在它所依赖的属性发生改变时才会重新计算。

一个简单的计算属性可以这样定义：

computed: {
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
}

在这个例子中，我们定义了一个名为 fullName 的计算属性。它使用了当前组件的 firstName 和 lastName 两个属性计算出了一个新的值，这个新的值可以被其它组件使用。

计算属性的使用方法

计算属性的使用方法非常简单，只需要在 Vue 组件的 computed 属性中声明一个对象，对象中的每个属性都是一个计算属性，这个属性的值就是计算属性的值。

下面是一个在 HTML 中使用计算属性的例子：

<template>
  <div>
    <p>First Name: {{ firstName }}p>
    <p>Last Name: {{ lastName }}p>
    <p>Full Name: {{ fullName }}p>
  div>
template>
 
<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    },
  },
};
script>

在这个例子中，我们定义了一个 fullName 计算属性，它使用了 firstName 和 lastName 两个属性计算出了一个新的值，并在 HTML 中渲染出来。

计算属性的Getter和Setter方法

Getter方法

Getter方法用于获取计算属性的值。在Vue组件中，你可以通过定义一个计算属性的getter方法来获取该属性的值。Getter方法没有参数。示例如下：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  },
},

在这个例子中，fullName 是一个计算属性，根据 firstName 和 lastName 计算出全名。每当 firstName 或 lastName 的值发生变化时，fullName 会自动重新计算并返回新的值。

Setter方法

Setter方法用于设置计算属性的值。你可以通过提供一个setter方法来实现对计算属性的修改。Setter方法接收一个参数，用于接收新的值。示例如下：

computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName;
    },
    set(value) {
      const [firstName, lastName] = value.split(' ');
      this.firstName = firstName;
      this.lastName = lastName;
    },
  },
},

在这个例子中，fullName 是一个计算属性，根据 firstName 和 lastName 计算出全名。通过提供一个setter方法，我们可以通过修改 fullName 的值来同时修改 firstName 和 lastName。

使用示例：

this.fullName = 'John Doe';
console.log(this.firstName); // 输出 John
console.log(this.lastName); // 输出 Doe

在这个示例中，我们通过修改 fullName 的值为 ‘John Doe’，利用setter方法自动将其分割为 firstName 和 lastName 并分别赋值。这个示例展示了computed属性getter和setter方法的用法。

计算属性的优缺点

计算属性的优点很明显，它可以让我们更好地管理数据和逻辑，让代码更加简洁易懂。除此之外，计算属性还有以下优点：

• ️计算属性有缓存，它只有在它所依赖的属性发生改变时才会重新计算，这样可以提高应用的性能。

• ️计算属性可以被其他计算属性和方法所依赖，这样可以实现更加复杂的数据和逻辑管理。

不过，计算属性并不是没有缺点的，以下是它的两个主要缺点：

• ️计算属性只能进行简单的计算，不能进行复杂的操作，比如网络请求。

• ️计算属性的值是只读的，不能直接改变，需要通过改变它所依赖的属性来改变它的值。

带参数的计算属性

有时候我们需要在计算属性中传入一些参数，这时我们可以使用带参数的计算属性。

下面是一个带参数的计算属性的例子：

import { mapState } from 'vuex';
 
export default {
  computed: {
    fullName() {
      return this.getFullName('John', 'Doe');
    },
    ...mapState({
      count: state => state.count
    }),
  },
  methods: {
    getFullName(firstName, lastName) {
      return firstName + ' ' + lastName;
    },
  },
};

在这个例子中，我们定义了一个 getFullName 方法，它有两个参数 firstName 和 lastName。然后在计算属性 fullName 中调用了这个方法，并传入了参数 ‘John’ 和 ‘Doe’。这样就可以在计算属性中使用带参数的方法来进行计算。

计算属性的缓存

计算属性具有缓存的特性，也就是说在计算属性所依赖的属性没有发生改变的情况下，计算属性的值会被缓存起来，下次再次访问时直接返回缓存的值，而不需要重新计算。

这个缓存的特性可以大大提高应用的性能，特别是当有很多依赖于计算属性的组件时。

例如：

computed: {
  fullName() {
    console.log('计算属性 fullName 被调用');
    return this.firstName + ' ' + this.lastName;
  },
},

在这个例子中，我们在计算属性 fullName 中使用了 console.log 方法来输出一个调试信息。如果在组件中多次访问 fullName ，你会发现只有第一次会触发计算属性的计算，后续的访问都会直接返回缓存的结果。

计算属性 vs 方法

在 Vue 组件中，除了使用计算属性，还可以使用方法来进行类似的计算操作。那么什么时候应该使用计算属性，什么时候应该使用方法呢？

一般来说，如果某个值是依赖于其他数据变化而变化的，并且这个值是会被频繁使用的，那么就应该使用计算属性。因为计算属性具有缓存的特性，能够提高应用的性能。

而如果某个操作是有副作用的，比如发起网络请求或者修改数据，那么就应该使用方法。

另外，计算属性还有一个特性，就是可以被其他计算属性所依赖。也就是说，计算属性可以组合成更加复杂的逻辑，让代码更加清晰易懂。

结论

通过本篇博客的介绍，我们了解了计算属性的定义、使用方法、优缺点等方面的知识。计算属性是 Vue 中非常重要和常用的概念，能够让我们更好地管理数据和逻辑，让代码更加简洁易懂。

---

博客主页：魔王-T

大鹏一日同风起 扶摇直上九万里

❤️感谢大家点赞收藏⭐评论✍️

---