vue ~ computed 计算属性

vue - computed  计算属性

模板内的表达式非常便利，但是设计它们的初衷适用于简单运算的。

在模板中放入太多的逻辑会让模板过重且难以维护。

例如：

<div id="example">
{{ message.split('').reverse().join('') }}
</div>

在这个地方，模板不再是简单地声明式逻辑。你必须看一段事件才能意识到，这里是想要显示变量message 的反转字符串。当你想要在模板中的多出包含此翻转字符串时，就会更加难以处理。

所以对于任何复杂逻辑，你都应当使用计算属性。

应用场景：

1：过滤和排序

我们可以利用计算属性来过滤和排序列表数据。

例如：定义一个计算属性，过滤掉所有的空数据或不需要的数据。

computed: {

  filteredList: function() {

    return this.list.filter(function(item) {

      return item && item.name && item.name.trim() !== ''

    })

    .sort(function(a, b) {

      return a.name.toLowerCase() > b.name.toLowerCase()

    })

  }

}

2：格式化数据

我们可以利用计算属性来格式化数据。

例如格式化货币、日期和时间等。

computed: {

  formattedPrice: function() {

return '￥' + this.price.toFixed(2)

 },

formattedDate: function() {

    return moment(this.date).format('yyyy-MM-dd')

  }

}

在上述示例中，我们定义了两个计算属性，分别称为formattedPrice和formattedDate。它们分别格式化了货币和日期数据。

3:依赖关系

当一个数据属性的值依赖于其他多个属性的值时，可以使用computed属性。

例如，计算两个数值属性的和或差。

<template>

  <div>

    <p>Number 1: {{ number1 }}</p>

    <p>Number 2: {{ number2 }}</p>

    <p>Sum: {{ sum }}</p>

  </div>

</template>

<script>

export default {

  data() {

    return {

      number1: 11,

      number2: 22,

    };

  },

  computed: {

    sum() {

      // 计算两个数值属性的和

      return this.number1 + this.number2;

    },

  },

};

</script>

4:字符串拼接

当需要将多个数据属性拼接成一个字符串时，可以使用computed属性。

例如，将用户名和用户角色拼接成一个欢迎语句。

<template>

  <div>

    <p>Username: {{ username }}</p>

    <p>Role: {{ role }}</p>

    <p>Welcome: {{ welcomeMessage }}</p>

  </div>

</template>

<script>

export default {

  data() {

    return {

      username:'Freddie Mercury',

      role: 'Lead singer',

    };

  },

  computed: {

    welcomeMessage() {

      // 将用户名和用户角色拼接成一个欢迎语句

      return `Welcome, ${this.username}! You are a ${this.role}.`;

    },

  },

};

</script>

5：计算属性的getter 和 setter

我们可以利用计算属性的getter和setter方法来实现更加灵活的属性计算。

例如，我们可以定义一个计算属性，当我们为它赋值时，它将自动更新相关的数据。如下所示：

computed: {

  fullName: {

    get: function() {

      return this.firstName + ' ' + this.lastName

    },

    set: function(newValue) {

      var names = newValue.split(' ')

      this.firstName = names[0]

      this.lastName = names[names.length - 1]

    }

  }

}

在这个示例中，我们定义了一个名为fullName的计算属性，它具有getter和setter方法。

当我们获取该属性时，它会将firstName和lastName组合成一个完整的名称；

而当我们将该属性设置为某个新值时，它会将该值分割为名和姓，并在firstName和lastName属性上自动更新。

需要注意：

computed属性只能用于同一个组件内部的数据计算，不能用于跨组件的数据传递。

如果需要在不同组件之间共享计算属性，可以考虑使用Vuex或事件总线等方式来实现。