Vue3前端：计算属性computed与普通方法的区别

结论：computed有缓存，普通方法没有缓存。

• 对于computed来说，只要依赖的数据发生变化，就会重新计算，重新调用； 但是只要依赖的数据没有发生变化，不管代码用了几次，都只会调用一次。

• 而普通方法无缓存，代码写了几次，就会调用几次。

1、computed与普通方法对比

下面举例说明： 需求：输入商品单价和购买数量，输出总价。

为突出两种方法在调用上的区别，分别多次调用两种方法，效果如下：

只要依赖的数值不变，即只要“单价”或“数量”不改变，计算属性就只会调用一次。而普通方法，使用多少次就会调用多少次。

代码实现如下：

  <div class="box">
    单价：<input type="text" v-model="prices">元
    <br>
    数量：<input type="text" v-model="number">个
    <br>
    <br>
    计算属性：
    <br>
    <!-- 计算属性 -->
    商品总价为：{{ totalMoney }} 元<br>
    商品总价为：{{ totalMoney }} 元<br>
    商品总价为：{{ totalMoney }} 元<br>
    商品总价为：{{ totalMoney }} 元<br>
    商品总价为：{{ totalMoney }} 元<br>
    <br>
    方法调用：
    <br>
<!-- 方法调用 -->
    商品总价为：{{ finalMoney() }} 元<br>
    商品总价为：{{ finalMoney() }} 元<br>
    商品总价为：{{ finalMoney() }} 元<br>
    商品总价为：{{ finalMoney() }} 元<br>
    商品总价为：{{ finalMoney() }} 元<br>
  <br>
  <br>

</div>

</template>

<script lang="ts" setup >

import { ref , computed} from 'vue';


let prices=ref(100)
let number=ref(1)

let totalMoney = computed( ()=>{
  console.log("计算属性调用")
  return  prices.value*number.value
  
})

function finalMoney(){
  console.log("方法调用")
  return  prices.value*number.value
}

</script>
<style>
.box{
  background-color: #439eff;
  margin: 20px;
  padding: 20px;
  width: 60%;
}
</style>

2、computed的修改属性

上述代码仅实现的computed的只读属性，是不可修改的。如需修改可以在computed方法体里添加get()和set()方法。这两种方法都是根据依赖值进行再次计算。

代码实现如下：

  <div class="box">
    单价：<input type="text" v-model="prices">元
    <br>
    数量：<input type="text" v-model="number">个
    <br>
    <br>
    计算属性：
    <br>
    <!-- 计算属性 -->
    商品总价为：{{ totalMoney }} 元<br>

  <br>
  <br>
  <button @click="changeMoney">修改单价</button>

</div>

</template>

<script lang="ts" setup >

import { ref , computed} from 'vue';

let prices=ref(100)
let number=ref(1)

let totalMoney = computed( {
  get(){
   
    return prices.value*number.value

  },
  set(){
    // 因为在点击方法里已经改变了prices的值，在这里可以不用写代码，但是必须要添加上set()这个方法，否则只写get()会报错。
    
  }
  
})
function changeMoney(){
   //弹窗输入修改后的金额
  const money = prompt('请输入金额');
  prices.value= Number(money)
}