Vue 计算属性

本节介绍计算的使用。什么是计算，计算的特点，还有计算和在实际使用中的区别。其中重点掌握计算和的区别，了解它之后，才能在日常工作中灵活使用计算和。

计算，就是当其依赖的值发生变化时，这个的值会更新，与之相关的 DOM 部分也会同步更新。— 官方定义

计算实际上是，它可以完成各种复杂的逻辑，运算、等，并最终返回值。之前的章节中介绍了模版插值的语法，我们知道模板内的可以使用表达式进行计算，例如：{{ count * number }}。但有时候我们的计算逻辑并非如此简单，当模板中放入太多的复杂逻辑会让模板过于繁琐且难以维护。计算 computed 的使用可以此类问题。 computed 在项目中会大量使用，在使用时需要注意的是 computed 必须有返回值。使用 computed 并不难，难点在于如何编写其内部的复杂逻辑。

前面介绍了什么是计算，那么怎么去定义计算呢？让我们先来看一段：

<!DOCTYPE html>
<html lang="en">
<head>
  < charset="UTF-8">
  < name="viewport" content="width=device-width, initial-scale=1.0">
  < http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <h1>商品：{{count}} 个</h1> 
    <h1>商品单价：{{unitPrice}} 元</h1> 
    <h1>商品总价：{{totalPrice()}} 元</h1> 
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
	el: '#app',
  data: {
  	count: ,
  	unitPrice: 
  },
  methods: {
  	totalPrice() {
  		return this.count * this.unitPrice
  	}
  }
})
</script>
</html>

解释：上述例子中，模板语句中我们通过一定的逻辑运算得到了商品的总价。像这样的算法我们可以使用计算来实现，接下来我们用计算来改写这个例子：

<!DOCTYPE html>
<html lang="en">
<head>
  < charset="UTF-8">
  < name="viewport" content="width=device-width, initial-scale=1.0">
  < http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <h1>商品：{{count}} 个</h1> 
    <h1>商品单价：{{unitPrice}} 元</h1> 
    <h1>商品总价：{{totalPrice}} 元</h1> 
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
	el: '#app',
  data: {
  	count: ,
  	unitPrice: 
  },
  computed: {
  	totalPrice() {
  		return this.count * this.unitPrice
  	}
  }
})
</script>
</html>

解释：
第 14-16 行，我们定义了计算 totalPrice，它的返回值是商品的单价和相乘得到的总价，在 html 模板中，我们直接用插值表达式 {{ totalPrice }} 来获得商品的总价，然后渲染到上。

计算的值会根据其内部依赖的变化而重新计算。也就是说，在上面的例子中当 count 和 unitPrice 有任意一方发生改变时 totalPrice 都会随之更新，最后更新。我们通过下面的例子来验证这一点：

<!DOCTYPE html>
<html lang="en">
<head>
  < charset="UTF-8">
  < name="viewport" content="width=device-width, initial-scale=1.0">
  < http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <h1>商品：{{count}} 个</h1> 
    <h1>商品单价：{{unitPrice}} 元</h1> 
    <h1>商品总价：{{totalPrice}} 元</h1> 
    <button @click="changePrice">单价</button>
    <button @click="changeCount"></button>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
	el: '#app',
  data: {
  	count: ,
  	unitPrice: 
  },
  computed: {
  	totalPrice() {
  		return this.count * this.unitPrice
  	}
  },
  methods: {
  	changePrice() {
  		vm.unitPrice = vm.unitPrice + 
  	},
  	changeCount() {
  		vm.count = vm.count + 
  	}
  }
})
</script>
</html>

解释：
第 5-7 行，我们在中加入了单价和的两个操作按钮，每次点击单价就对单价 unitPrice + 1，点击就对 count + 1。当我们每次点击时，可以发现商品总价的值都会发生改变，因此计算的值会随着依赖的变化而更新。

前面我们介绍了如何编写简单的计算，接下来我们介绍了一下如何通过 getter 和 setter 来编写复杂的计算。
每计算都包含 getter 和 setter，我们上面的两个示例都是计算的认，只是利用了 getter 来读取。在你需要时，也可以提供 setter ，当手动计算的值就像普通数据那样时，就会触发 setter，执行一些的操作。

<!DOCTYPE html>
<html lang="en">
<head>
  < charset="UTF-8">
  < name="viewport" content="width=device-width, initial-scale=1.0">
  < http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
      <h1>全名： {{fullName}} </h1> 
      <h1>firstName： {{firstName}} </h1> 
      <h1>lastName： {{lastName}} </h1> 
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
	el: '#app',
  data: {
  	firstName: '',
  	lastName: ''
  },
  computed: {
    fullName: {
      // getter
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[]
        this.lastName = names[names.length - ]
      }
    }
  }
})
</script>
</html>

解释：
上述中我们定义了 fullName 的计算，并定义了它的 getter 和 setter。
第 4-6行，setter: 每次 fullName 时将姓赋值给 firstName，将名赋值给 lastName。
第 8-11行，getter: 每次 fullName 时将 firstName 和 lastName 拼接后返回。
我们打开控制台，运行 vm.fullName = ‘John Doe’ 时 setter 会被，vm.firstName 和 vm.lastName 也会相应地被更新。在控制台输入 vm.firstName 回车可以看到它的值。

如果不使用计算，在 methods 里定义了，也可以实现相同的，甚至该还可以接受参数，使用起来更灵活。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
  < charset="UTF-8">
  < name="viewport" content="width=device-width, initial-scale=1.0">
  < http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <h1>商品：{{count}} 个</h1> 
    <h1>商品单价：{{unitPrice}} 元</h1> 
    <h1>商品总价：{{totalPrice()}} 元</h1> 
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 var vm = new Vue({
	el: '#app',
  data: {
  	count: ,
  	unitPrice: 
  },
  methods: {
  	totalPrice() {
  		return this.count * this.unitPrice
  	}
  }
})
</script>
</html>

解释：
第 8-10 行，我们定义了 totalPrice，它的返回值是商品的单价和相乘得到的总价，在 html 模板中，我们直接用插值表达式 {{ totalPrice() }} 来获得商品的总价，然后渲染到上。

既然 methods 同样可以模板中复杂逻辑计算的问题，那么为什么还需要使用计算呢?

原因就是：计算是基于它的依赖缓存的。前面我们介绍过，计算的改变取决于其所依赖数据的变化，所以只要依赖数据不发生改变，计算就不会更新。当我们重复计算时它也不会重复计算，只会缓存的值。而我们每次 methods 都会重新计算一遍，这样将会消耗一部分。当然，如何你不希望对数据进行缓存，那么可以用来代替。

本节，我们带大家学习了 computed 在 vue 项目中的运用。主要知识点有以下几点：

←Vue 动态样式绑定

Vue 侦听器→

Vue 计算属性

您的鼓励是对我最大的支持