Vue.js前端框架系统学习（7）——计算属性computed

计算属性

写在前面：今天来整理一下计算属性的语法和具体用例。

计算属性

正如官网上所说的：

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

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

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。

为了在模版中尽可能的使用简单的语法，我们将一些较为复杂的计算放到计算属性里。

具体用法

首先我们在components目录下新建一个Computed.vue文件，并在App.vue中注册该组件。

然后我们在Computed.vue中使用计算方法来实现message的翻转：

<template>
  <div><h1>计算属性演示</h1>
  <hr>
  <p> 原来的message: {{message}} </p>
  <p> 翻转后的message: {{ reversedMessage }} </p></div>
</template>

<script>
export default {
  name: 'Computed',
  data () {
    return {
      message: 'Hello VUE'
    }
  },
  computed: {
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

这里声明了一个计算属性reversedMessage,在这个函数中将message的内容进行翻转后return。

computed与methods的区别

不难发现，这个computed计算属性跟methods很相似，我们同样可以在methods中声明一个reversedMessage1:

methods: {
	//这边防止跟computed中重名
    reversedMessage1: function () {
      return this.message.split(''.reverse().join(''))
    }
  }

在调用两者时也是有区别的。

两种方式都可以实现翻转字符串，那为什么我们要用computed计算属性呢？

官方给的回答是：

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

我个人的理解是：对于官方给出的解释，总而言之就是computed计算属性有缓存,只要在这个计算属性中没有发生改变，下一次调用计算属性就能直接拿过来使用，而不是像methods中的方法又得执行一遍。这种缓存能够提高无谓的重复浪费。当然了，如果你不希望有缓存，那就用methods来替代。

计算属性VS侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

可以看到，在这里使用命令式的watch回调，感觉代码冗余度有点高。如果换做computed计算属性来处理的话就会好很多了。

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

为计算属性添加setter方法

计算属性默认只有getter方法，如果我们需要setter方法也可以自行添加：

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

这里我直接引用了官网的例子，可以看到我们为fullName计算属性添加了setter方法，即可以接收一个newValue从而更新fullName.