结论：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)
}