Computed属性

简单理解就是将一堆计算抽离成简单的一个属性，并且拥有缓存机制(值变化才会重新计算，否则立即返回)

官网举例：

  1. <div id="example">
  2.   <p>Original message: "{{ message }}"</p>
  3.   <p>Computed reversed message: "{{ reversedMessage }}"</p>
  4. </div>
  6. var vm = new Vue({
  7.   el: '#example',
  8.   data: {
  9.     message: 'Hello'
  10.   },
  11.   computed: {
  12.     // a computed getter 定义一个computed属性，它的值会根据 message的变化而变化
  13.     reversedMessage: function () {
  14.       // `this` points to the vm instance
  15.       return this.message.split('').reverse().join('')
  16.     }
  17.   }
  18. })

Computed VS Methods

Computed属性和普通methods的区别在于：computed properties are cached based on their dependencies。不是每次调用都会执行，而是根据其依赖的属性变化而变化

Computed VS Watched Property

Vue提供了另一种响应数据变化的属性叫 Watched Property，当你有一些数据需要基于其他数据的变化而变化时，虽然Watched属性能满足，但是考虑如下场景，Computed属性会变得更友好 简洁

  1. var vm = new Vue({
  2.   el: '#demo',
  3.   data: {
  4.     firstName: 'Foo',
  5.     lastName: 'Bar',
  6.     fullName: 'Foo Bar'
  7.   },
  8.    //watch属性会跟着firstName,lastName分开一起变，但是都要执行一次操作，如果同时变，操作会变为两次
  9.   watch: {
  10.     firstName: function (val) {
  11.       this.fullName = val + ' ' + this.lastName
  12.     },
  13.     lastName: function (val) {
  14.       this.fullName = this.firstName + ' ' + val
  15.     }
  16.   }
  19. // computed属性无论何时，只需计算一次即可
  20.  computed: {
  21.     fullName: function () {
  22.       return this.firstName + ' ' + this.lastName
  23.     }
  24.   }
  25. })

Computed setter

默认Computed提供了getter方法，但是也可以通过如下方式来提供setter方法

  1. computed: {
  2.   fullName: {
  3.     // getter
  4.     get: function () {
  5.       return this.firstName + ' ' + this.lastName
  6.     },
  7.     // setter
  8.     set: function (newValue) {
  9.       var names = newValue.split(' ')
  10.       this.firstName = names[0]
  11.       this.lastName = names[names.length - 1]
  12.     }
  13.   }
  14. }