vue 计算属性和data_Vue:计算属性

一、为什么要使用计算属性

1、什么是计算属性

计算属性：可以理解为能够在里面写一些计算逻辑的属性。具有如下的作用：

减少模板中的计算逻辑。

数据缓存。当我们的数据没有变化的时候，不会再次执行计算的过程。

依赖固定的数据类型(响应式数据)，不能是普通的传入的一个全局数据。

在数据量比较大的时候，计算属性可以帮助我们提高性能，因为计算属性只会在数据变化的时候才会计算。

在讲解计算属性之前先来看下面的一个例子：

需求：外卖套餐A每份15元，客户点了3份，总价打八折，配送费5元，要求在界面显示总价，代码如下：

您购买了{ {info.name}}共{ {info.count}}份

总价：{ {info.count*info.price*info.sale+info.freight}}元

name:'Test',

data(){return{

info:{

userId:1,

price:15,

name:'套餐A',

count:3,

sale:0.8,

freight:5}

}

}

}

界面运行效果：

看了上面的例子，可能有人会问：使用这种方式已经实现了需求，那为什么还要使用计算属性呢？我们知道，vue中模板内的表达式非常便利，设计的初衷是用于简单运算的。如果在模板中放入太多的逻辑会让模板过重而且难以维护，看上面的代码：

总价：{ {info.count*info.price*info.sale+info.freight}}元

在这段代码中，模板不在是简单的声明式逻辑，而是复杂的逻辑计算，如果想要在多处引用总价的时候，就会难以维护。所以，对于任何复杂的逻辑，都应当使用计算属性。

看下面使用计算属性的例子：

计算属性

您购买了{ {info.name}}共{ {info.count}}份

总价：{ {totalPrice}}元

name:'ComputedDemo',

data(){return{

info:{

userId:1,

price:15,

name:'套餐A',

count:3,

sale:0.8,

freight:5}

}

},

computed:{//定义计算属性totalPrice

totalPrice:function(){return this.info.count*this.info.price*this.info.sale+this.info.freight

}

}

}

界面显示效果：

注意：计算属性是一个属性，不是方法，不能写在methods中，放在computed属性里面。

上面计算属性的写法也可以使用ES6的写法：

//使用ES6写法

totalPrice(){return this.info.count*this.info.price*this.info.sale+this.info.freight

}

二、计算属性和方法的区别

1、区别

上面的例子除了使用计算属性，还可以使用方法实现：

计算属性

您购买了{ {info.name}}共{ {info.count}}份

使用计算属性获取总价：{ {totalPrice}}元

使用方法获取总价：{ {getTotalPrice()}}元

name:'ComputedDemo',

data(){return{

info:{

userId:1,

price:15,

name:'套餐A',

count:3,

sale:0.8,

freight:5}

}

},

computed:{//定义计算属性totalPrice

/