Vue.js计算属性和侦听属性

---

更多关于Vue.js的系列文章请点击：Vue.js开发实践(0)-目录页

---

一、计算属性

1.1、计算属性的使用

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

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

为了处理复杂的逻辑处理和计算操作，Vue.js为实例提供了一个计算属性computed用于处理。所以上述的代码可以写成：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

1.2、计算属性结果是被缓存的

我们不一定需要在vue实例中使用计算属性，我们也可以使用methods属性来响应一个反转字符串：

<p>Reversed message: "{{ reversedMessage() }}"</p>

methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

它们都能实现一样的结果，但是它们也有不同点：
计算属性获得的结果是被缓存的，当结果依赖的数据改变时，结果缓存才会被更新，而通过表达式调用的结果会在每次请求时都刷新。

为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

1.3、计算属性的getter和setter

计算属性中默认提供了一个getter

computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }

即以上代码的真正写法是：

computed: {
    reversedMessage: function () {
    	get: {
   		   return this.message.split('').reverse().join('')
    	}
    }
  }

如果有需要，我们还可以为计算属性中添加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]
    }
  }
}

之后可以通过vm.fullName去调用setter方法。

二、侦听属性

Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

<div id="vue13">
		<p v-on:click='counter++'>点我计数：{{counter}}</p>
		<p>旧值：{{oldCounter}} | 新值：{{newCounter}}</p>
	</div>

new Vue({
	el: '#vue13',
	data: {
		counter: 1,
		oldCounter: 1,
		newCounter: 1
	},
	watch: {
		counter: function(newMessage,oldMessage){
			this.newCounter = newMessage;
			this.oldCounter = oldMessage;
		},
		oldCounter: function(newMessage,oldMessage){

		},
		newCounter: function(newMessage,oldMessage){

		}
	}
})