为什么使用计算属性
我们知道，在模板中可以直接通过插值语法显示一些data中的数据 。但在某一些情况时，我们可能需要丢数据进行一些转化后再显示，或者是将多个数据结合起来进行显示
例如：假如有两个变量firstName和lastName,需求是多次显示完整的名字，如果还是用插值法的话，我们就需要写多个 {{firstName}}{{lastName}}，用起来就很麻烦，代码看上去也很低级 。所以我们就需要使用到实例中的计算属性computed
如何使用计算属性
注意：
（1）使用计算属性时不用像方法那样加小括号，它就相当于是一个属性，直接拿来用就可以
（2）计算属性取名最好不要是动词（虽然动词也不会有影响）
（3）下面我会谈及到计算属性和方法的区别
<body>
<div id="app" >
//小胡子方法
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
//使用methods,加上小括号
<h2>{{getfullName()}}</h2>
//使用计算属性，计算属性可以不加小括号，因为是一个属性
<h2>{{fullName}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
firstName:'张',
lastName:'三'
},
methods:{
getfullName() {
return this.firstName + ' ' + this.lastName;
}
},
//计算属性取名最好不要加动词
computed:{
fullName:function() {
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
计算属性的setter和getter
注意：
（1）一般情况下没有set方法，只需要实现get方法（只读属性）
（2）只有get方法的可以简写
（3）set方法会有一个参数，这个参数就是传入的新的值
<body>
<div id="app" >
<h2>{{fullName}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
firstName:'张',
lastName:'三'
},
computed:{
fullName: {
//一般情况下没有set方法，只需要实现get方法（只读属性）
set:function(newValue) {
const name = newValue.split(' ');
this.firstName = name[0];
this.lastName = name[1];
},
get:function() {
return this.firstName + ' ' + this.lastName;
}
}
//实质就是get方法
// fullName: function() {
// return this.firstName + ' ' + this.lastName;
// }
}
})
</script>
</body>
methods和computed区别
在上面我们看到methods和computed都可以用来实现需求，那么这两个究竟有什么不同呢？
在以下例子中分别执行methods和computed各两次，请看下图控制台打印结果。我们发现，methods执行了两次，而computed只执行了一次。
区别：
计算属性会进行缓存，如果多次使用，计算属性只会调用一次。只要其中的变量不改变，就不需要再一次执行，能够更好地提高性能
<body>
<div id="app" >
<h2>{{getfullName()}}</h2>
<h2>{{getfullName()}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
firstName:'张',
lastName:'三'
},
methods:{
getfullName() {
console.log("我是方法");
return this.firstName + ' ' + this.lastName;
}
},
computed:{
fullName: function() {
console.log("我是计算属性");
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
</body>
小案例：用计算属性算总价
方法一
<body>
<div id="app" >
<h2>{{totalPrice}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
books:[
{ id: 1, name: "红楼梦", price: 115},
{ id: 2, name: "西游记", price: 86},
{ id: 3, name: "水浒传", price: 68},
{ id: 4, name: "三国演义", price: 133}
]
},
//计算属性
computed:{
totalPrice:function() {
let result=0;
for (let index = 0; index < this.books.length; index++)
result += this.books[index].price;
return result;
}
}
})
</script>
</body>
方法二
使用ES6中的语法，只改变for语句（使用in），其他与以上相同
computed:{
totalPrice:function() {
let result=0;
for(let i in this.books)
result += this.books[i].price;
return result;
}
}
方法三
使用ES6中的语法，只改变for语句（使用of），其他与以上相同
computed:{
totalPrice:function() {
let result=0;
for(let book of this.books)
//无需加this
result += book.price;
return result;
}
}
