计算属性：以实例代码为例，使用双向绑定在input框中输入姓和名，最终显示出来，使用<div>{{firstName}}{{lastName}}</div>显示太过于冗余，可以通过fullName（计算属性）返回全名
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的计算属性和侦听器</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
姓： <input v-model="firstName"/>
名：<input v-model="lastName"/>
<div>{{fullName}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
firstName:'',
lastName:''
},
computed:{//指的是一个属性通过其他属性计算而来
fullName:function(){
return this.firstName+' '+this.lastName
}
}
})
</script>
</body>
</html>
当firstName和lastName没有改变的时候，再使用fullName的时候，它不会发生改变，会使用上次计算的缓存值
侦听器（监听某一个数据的变化，一旦数据发生变化，可以在侦听器中做逻辑变化）：以上实例，当姓或者名发生改变的时候，count数据会进行加一
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的计算属性和侦听器</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
姓： <input v-model="firstName"/>
名：<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
firstName:'',
lastName:'',
count:0
},
computed:{
fullName:function(){
return this.firstName+' '+this.lastName
}
},
watch:{
firstName:function(){
this.count++
},
lastName:function(){
this.count++
}//firstName或者lastName发生变化，count+1，此处还可以直接侦听fullName的变化，更简便
}
})
</script>
</body>
</html>