计算属性，方法，侦听器
一、计算属性二、方法三、侦听器四、代码
一、计算属性
什么情况下要使用计算属性呢 如上图为了展示想要的数据，插值表达式写的太长了，为了把要展示的数据提前处理好让插值表达式变简洁，这个时候就要使用计算属性了 计算属性有个特点，它是内置缓存的（该计算属性依赖lastName和this.firstName两个变量，如果它依赖的变量没有发生变化，计算属性不会重新计算会一直用上次计算过的结果，这样会提升一些性能） 刷新页面和修改计算属性依赖得属性输出“计算了一次”，修改age并没有打印出“计算了一次”,
二、方法
还可以使用方法显示fullName，但是方法没有缓存机制，只要页面重新渲染都会调用方法
三、侦听器
侦听fullName依赖的所有变量，当依赖的变量其中一个改变就给fullName重新赋值 一开始刷新没有打印“计算了一次”是因为一开始在data里面定义了，他和计算属性一样有缓存机制，但是代码看起来没有计算属性简洁 总结：如果一个功能可以通过computer / methods / watch来实现，首选computer（代码简洁性能较高）
四、代码
<!DOCTYPE html>
<html>
<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: "maomao",
lastName: "liu",
age: " 22",
fullName: "liu maomao"
},
watch: {
lastName: function() {
console.log("计算了一次");
this.fullName = this.lastName + " " + this.firstName;
},
firstName: function() {
console.log("计算了一次");
this.fullName = this.lastName + " " + this.firstName;
}
}
})
</script>
</body>
</html>
