Vue计算属性computed:{}和侦听器watch:{}
<body>
<div id="root">
姓名：<input v-model="firstName"/>
密码：<input v-model="lastName"/>
<div>{{firstName}}{{lastName}}</div>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
firstName:"",
lastName:"",
count:0,
},
//一个属性通过其他属性计算而来
//有一个好处，如果firstName没改变lastName也没改变fullName会使用上次计算的缓存
//计算属性性能比较高
computed:{
fullName: function(){
return this.firstName + " " + this.lastName;
}
},
//侦听器,监听某一个数据的变化，一旦数据发生变化就可以在侦听器里进行业务逻辑
watch:{
/*firstName: function(){
this.count ++;
},
lastName: function(){
this.count ++;
},*/
fullName: function(){
this.count ++;
},
},
})
</script>