1. 使用方法
（1）定义计算属性
new Vue({
el:"#app",
data:{ ... },
methods:{ ... },
watch:{ ... },
computed:{
计算属性名(){
复杂的计算过程
return 属性值
}
}
})（2）在页面上使用计算属性
<元素>{
{计算属性名}}
//注意：
//计算属性虽然称为属性，但其本质是一个函数
//虽然计算属性本质是一个函数，但是在页面中使用计算属性时，不要加()
2. 计算属性原理
（1）当 new Vue() 扫描到一个不带 () 的变量时，会先去 data 中查找普通的属性。如果没找到，就去计算属性 computed 中查找。
（2）如果找到计算属性，就自动调用计算属性的函数，执行出计算结果，并将计算结果替换到页面中属性名位置显示。
（3）并且，vue 会自动将首次计算属性计算出的结果，缓存起来，反复使用！避免重复计算！
（4）当多次使用同一计算属性时，不会重复执行计算属性的计算过程，而是直接从缓存中取值。
（5）当计算属性内部以来的其它变量值发生了变化时，vue 会自动重新计算属性的值，并重新缓存起来反复使用。
计算属性 computed 和普通函数 methods 差别：
methods 中的普通函数，如果反复调用几次，就会反复执行几次，不会缓存结果；computed 中的计算属性，即使反复使用多次，也只计算一次，然后将结果缓存起来反复使用。如果更倾向于计算出一个值显示到页面上时，首选 computed 计算属性；如果更倾向于执行一个操作，而不关系结果时，首选 methods 普通函数。
举例：使用计算属性计算购物车总价；
{
{p.pid}} | {
{p.pname}} | ¥{
{p.price.toFixed(2)}} | {
{p.count}} | 小计:¥{
{(p.price*p.count).toFixed(2)}}
总价:¥{
{total.toFixed(2)}}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/hz/126452.html