vue中的计算属性和侦听器

• 计算属性

1. <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>
   

   computed：指的是一个属性通过其他属性计算而来 

   好处：如果firstName和lastName没改变，每次在使用fullName时，会使用上一次计算结果的缓存结果。 

•  

  侦听器

  侦听器是用来监听某一个数据的变化。 

  定义侦听器用 watch：{ }

  例如现在有一个需求，需要显示改变次数，也就是当对姓或者名进行变更时，计数加1

  这时候定义一个count初始值为0，每次fullName改变，侦听器会对count进行加1操作。

  <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:{
              fullName:function(){
                  this.count++
              }
          }
      })
  </script>