vue.js 计算属性（vue 二）

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

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

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

基础例子

<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('')
    }
  }
})

结果：

Original message: “Hello”

Computed reversed message: “olleH”

计算属性方法缓存

这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
  now: function () {
    return Date.now()
  }
}

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

计算属性 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
    }
  }
})

计算属性方式

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

完整例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js 模板语法</title>
</head>
<body>
	<div id="example">
		{{ message.split('').reverse().join('') }}
	</div>
	<div id="example2">
		<p>Original message: "{{ message }}"</p>
		<p>Computed reversed message: "{{ reversedMessage }}"</p>
		<p>缓存数据,now不会实时刷新：{{ now }}</p>
		<p>缓存数据,now不会实时刷新：{{ now }}</p>
	</div>
	<div id="demo">{{ fullName }} - {{ fullName22 }} - {{ fullName33 }}</div>

	<div id="watch-example">
		<p>
			Ask a yes/no question: <input v-model="question">
		</p>
		<p>{{ answer }}</p>
	</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
	new Vue({
		el : '#example',
		data : {
			message : 'https://www.google.com.hk/?gws_rd=ssl'
		}
	});
	
	var vm = new Vue({
		el : '#example2',
		data : {
			message : 'https://www.google.com.hk/?gws_rd=ssl'
		},
		computed : {
			// 计算属性的 getter
			reversedMessage : function() {
				return this.message.split('').reverse().join('')
			},
			now : function() {
				return Date.now()
			}
		}
	});

	var vm2 = 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
			}
		},
		computed : {
			fullName22 : function() {
				return this.firstName + ' ' + this.lastName
			},
			fullName33 : {
				// 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]
				}
			}
		}
	})
	vm2.firstName = 'wang';
	
	var watchExampleVM = new Vue({
		  el: '#watch-example',
		  data: {
		    question: '',
		    answer: 'I cannot give you an answer until you ask a question!'
		  },
		  watch: {
		    // 如果 `question` 发生改变，这个函数就会运行
		    question: function (newQuestion, oldQuestion) {
		    	if (newQuestion == 'ok') {
		     		this.answer = '3q...'
		    	} else {
		     		this.answer = 'Waiting for you to stop typing...'
		    	}
		    }
		  }
		})
</script>
</html>

测试结果
vue.js 计算属性（vue 二）