<div id='root'> 姓:<input v-model='firstName'/> 名:<input v-model='secondName'/> <div>{{fullName}}</div> <div>{{count}}</div> </div> <script> new Vue({ el:'#root', data:{ firstName:'', secondName:'', count: 0 }, computed:{ fullName:function(){ return this.firstName + this.secondName } }, watch: { firstName:function(){ this.count ++; }, secondName:function(){ this.count ++ } } }) </script>
计算属性:computed,一个属性是通过其他属性计算而来,这有一个好处,就是firstName和secondName没有变化的时候,fullName会使用上一次的缓存值,不会重新计算
侦听器:watch,去监听某一个数值的变化,一旦这个监听的数值发生了变化,就在侦听器里面处理业务逻辑