响应式侦听和计算

有时我们需要依赖于其他状态的状态——在 Vue 中，这是用组件计算属性处理的，以直接创建计算值，我们可以使用 computed 方法：它接受 getter 函数并为 getter 返回的值返回一个不可变的响应式 ref 对象。

我们先来看看一个简单的例子，关于计算值的方式，同样我们在 src/TemplateM.vue 写下如下代码：

   

    

     

      

     
     

      

       <template>
      
     
    

     

      

     
     

      

         <div class=
       "template-m-wrap">
      
     
    

     

      

     
     

      

           count ---> {
      
     
    

     

      

     
     

      

          {count}}
      
     
    

     

      

     
     

      

           plusOne ---> {
      
     
    

     

      

     
     

      

          {plusOne}}
      
     
    

     

      

     
     

      

         </div>
      
     
    

     

      

     
     

      

       </template>
      
     
    

     

      

     
     

      

       <script>
      
     
    

     

      

     
     

      

       import { ref, defineComponent, reactive, computed } from 
       "vue";
      
     
    

     

      

     
     

      

       export 
       default defineComponent({
      
     
    

     

      

     
     

      

         name: 
       'TemplateM',
      
     
    

     

      

     
     

      

         setup() {
      
     
    

     

      

     
     

      

           let count = ref(
       2)
      
     
    

     

      

     
     

      

           let plusOne = computed(() => {
      
     
    

     

      

     
     

      

             
       return count.value++
      
     
    

     

      

     
     

      

           })
      
     
    

     

      

     
     

      

           console.log(plusOne.value)
      
     
    

     

      

     
     

      

           
       return {
      
     
    

     

      

     
     

      

             count,
      
     
    

     

      

     
     

      

             plusOne
      
     
    

     

      

     
     

      

           }
      
     
    

     

      

     
     

      

         }
      
     
    

     

      

     
     

      

       })
      
     
    

     

      

     
     

      

       </script>
      
     
   

访问链接效果如下：