当前位置：首页 > article >正文

Vue 入门之 computed 计算属性

article 2025/2/21 3:16:41

文章目录

一、基础语法
二、计算属性 vs 方法
三、完整写法
四、代码样例

在 Vue 开发中，computed计算属性是一个非常强大且常用的特性。它可以帮助我们更高效地处理数据的转换和派生，使代码更加简洁和易于维护。本文将详细介绍 Vue 中computed计算属性的基础语法、与方法的对比、完整写法以及提供代码样例。

一、基础语法

computed是 Vue 实例中的一个选项，用于定义计算属性。计算属性是基于它们的响应式依赖进行缓存的，只有在相关响应式依赖发生改变时才会重新求值。

基本语法如下：

new Vue({
  data() {
    return {
      // 数据
    };
  },
  computed: {
    // 计算属性名
    computedPropertyName() {
      // 计算逻辑
      return // 返回值
    }
  }
});

在上面的代码中，我们在computed选项中定义了一个计算属性computedPropertyName，它的计算逻辑在函数内部实现，并返回计算结果。

二、计算属性 vs 方法

在 Vue 中，有时候可能会纠结是使用计算属性还是方法来处理数据转换。下面来对比一下它们的区别：

1. 语法和调用方式

计算属性：在模板中可以直接像访问普通属性一样使用计算属性，无需添加括号调用。例如：{{ computedPropertyName }}。
方法：在模板中需要添加括号调用方法，例如：{{ methodName() }}。

2. 缓存特性

计算属性：具有缓存特性，只有当它的依赖项发生变化时才会重新计算。如果依赖项没有变化，多次访问计算属性会直接返回缓存的值，提高性能。
方法：每次调用方法都会重新执行函数中的逻辑，没有缓存。

例如，下面的代码展示了使用计算属性和方法来实现相同功能的对比：

<!DOCTYPE html>
<html>

<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <!-- 使用计算属性 -->
    <p>计算属性结果：{{ computedFullName }}</p>
    <!-- 使用方法 -->
    <p>方法结果：{{ fullNameMethod() }}</p>
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          firstName: 'John',
          lastName: 'Doe'
        };
      },
      computed: {
        computedFullName() {
          return this.firstName + ' ' + this.lastName;
        }
      },
      methods: {
        fullNameMethod() {
          return this.firstName + ' ' + this.lastName;
        }
      }
    });

    const vm = app.mount('#app');
  </script>
</body>

</html>

在上述例子中，计算属性computedFullName和方法fullNameMethod实现了相同的功能，但计算属性在多次访问时如果依赖项没有变化，会直接返回缓存的值，而方法每次都会重新计算。

三、完整写法

计算属性除了上述的基本写法外，还可以使用对象的完整写法，这种写法可以提供更多的配置选项。

完整写法的语法如下：

new Vue({
  data() {
    return {
      // 数据
    };
  },
  computed: {
    computedPropertyName: {
      get() {
        // 获取计算属性值的逻辑
        return // 返回值
      },
      set(newValue) {
        // 设置计算属性值的逻辑
      }
    }
  }
});

在完整写法中，我们可以定义一个对象，包含get和set方法。get方法用于获取计算属性的值，set方法用于设置计算属性的值。

例如，下面的代码展示了使用完整写法的计算属性：

<!DOCTYPE html>
<html>

<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <p>全名：{{ fullName }}</p>
    <input v-model="firstName">
    <input v-model="lastName">
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          firstName: '',
          lastName: ''
        };
      },
      computed: {
        fullName: {
          get() {
            return this.firstName + ' ' + this.lastName;
          },
          set(newValue) {
            const names = newValue.split(' ');
            this.firstName = names[0] || '';
            this.lastName = names[1] || '';
          }
        }
      }
    });

    const vm = app.mount('#app');
  </script>
</body>

</html>

在上述例子中，计算属性fullName使用了完整写法，通过get方法获取全名，通过set方法可以设置全名并自动更新firstName和lastName。

四、代码样例

下面是一个更复杂的代码样例，展示了如何在 Vue 应用中使用计算属性：

<!DOCTYPE html>
<html>

<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <p>价格：{{ price }}</p>
    <p>数量：{{ quantity }}</p>
    <p>总价：{{ totalPrice }}</p>
    <input v-model="price">
    <input v-model="quantity">
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          price: 0,
          quantity: 0
        };
      },
      computed: {
        totalPrice() {
          return this.price * this.quantity;
        }
      }
    });

    const vm = app.mount('#app');
  </script>
</body>

</html>