计算属性
计算属性的值是一个函数，并且是内置缓存的；
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性、方法、侦听器</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{fullName}}
{{age}}
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
firstName:"Dell",
lastName:"Lee",
age:28
},
//计算属性
computed:{
fullName:function(){
console.log("计算了一次")；
return this.firstName + " " + this.lastName
}
}
})
</script>
</body>
</html>输出：
缓存机制：在本例中，计算属性为 fullName ,它依赖两个变量--firstName 和 lastName,当它依赖的变量没有发生任何改变的时候，计算属性就不会重新计算了，而用一直用上一次的计算结果，这样可以提高性能。（28已经变为27，但并没有“计算了一次”，依赖的值没有改变就不会再次计算）
依赖的值发生改变则再次计算
方法
示例：通过方法可以实现和上面同样的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性、方法、侦听器</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{fullName()}}
{{age}}
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
firstName:"Dell",
lastName:"Lee",
age:28
},
methods:{
fullName:function(){
console.log("计算了一次")；
return this.firstName + " "+ this.lastName；
}
}
})
</script>
</body>
</html>输出：
但 方法 中没有缓存机制，所以其性能不如 计算属性
侦听器
侦听器通过 侦听 firstName 和 lastName 的值是否发生变化，当发生变化时，就给 fullName 重新赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性、方法、侦听器</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{fullName()}}
{{age}}
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
firstName:"Dell",
lastName:"Lee",
fullName:"Dell Lee",
age:28
},
watch:{
firstName:function(){
console.log("计算了一次")；
this.fullName = this.firstName + " "+ this.lastName；
},
lastName:function(){
console.log("计算了一次")；
this.fullName = this.firstName + " "+ this.lastName；
}
}
})
</script>
</body>
</html>
只要监听的值不发生变化，就不会改变，同样有缓存机制
当监听的值发生变化，就会改变，会执行计算
