计算属性computed

• 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，所以用计算属性，容易测试和理解。

特点：内置缓存，基于响应式依赖进行缓存，只有里面依赖的数据改变时，才会重新求值
形式：放在vm（view-model）实例中，computed： { }；setter函数里面的参数就是改变后的值；getter函数记得return；
计算属性数据存储什么，要看函数执行结果。

下面例子中，当用输入的值给fullName重新赋值的时候，会触发计算属性里面的get，执行里面的代码，对firstName和lastName重新赋值渲染。因为get里面fullName的值是基于firstName和lastName，当它们不改变时，用的是缓存的值，不会再次调用get函数

这样用计算属性会优于methods，性能更高

输入名字，提交后

<div id="app">
		<div>输入名字: <input type="text" v-model="inputValue"><button @click="giveValue">提交</button></div>
		<div>FirstName: {{firstName}}</div>
		<div>LastName: {{lastName}}</div>
		<div>FullName: {{fullName}}</div>
	</div>
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: {
				firstName: "Tom",
				lastName: "Li",
				inputValue: ""
			},
			methods: {
				giveValue: function() {
					this.fullName = this.inputValue;
					// this.inputValue = "";
				}
			},
			computed: {
				fullName: {
					//getter函数
					get: function() {
						console.log("计算属性的getter")
						return this.firstName + " " + this.lastName;
					},
					// 重新给fullName设置时触发setter函数
					set: function(value) {
						// value获得的就是给fullname更改后的值，当提交后value即为输入的值
						console.log(value);
						console.log("计算属性的setter")
						var nowValue = value.split(" ");
						this.firstName = nowValue[0];
						this.lastName = nowValue[1];

					}
				}
			}

		})

当无需用setter函数时，可以用下列写法，省略get

	computed: {
				fullName: function() {
					return this.firstName + " " + this.lastName;
				}
			}