Vue基础第三章 - 计算属性
1、计算属性介绍
在第二章中我们介绍了在Vue的{{}}中可以使用一些简单的表达式进行计算，但是当表达式过长或者逻辑过于复杂就会变得不易理解和维护，比如第二章的示例{{ text.split(',').reverse().join(',') }}，为了使{{}}的内容看起来更简洁，就需要用到Vue中计算属性，如下示例
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
{{ reversedText }}
</div>
<script>
var app=new Vue({
el:"#app",
data:{
text:'123,456'
},
<!--计算属性在Vue的computed属性中以函数的形式定义-->computed:{
reversedText:function() {
return this.text.split(',').reverse().join(',');
}
}
})
</script>
</body>
</html>
2、计算属性用法
2.1、计算属性的常用用法
计算属性通常被用于完成各种复杂逻辑，包括运算和函数调用等，计算属性可以依赖多个Vue实例数据，任意一个数据变化都会使计算属性重新执行，页面也会随之更新，如下示例
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
总价：{{ prices }}
</div>
<script>
var app=new Vue({
el:"#app",
data:{
package1:[
{
name:'iPhone7',
price:7199,
count:2
},
{
name:'iPad',
price:2888,
count:1
}
],
package2:[
{
name:'apple',
price:3,
count:5
},
{
name:'banana',
price:2,
count:10
}
]
},
computed:{
<!--当package1和package2中的商品数量和种类出现变化时，计算属性都会重新执行。这是只是默认使用了计算属性的getter方法-->prices:function() {
var prices = 0;
for (var i = 0;i<this.packages1.length;i++){
prices+=this.package1[i].price*this.package1[i].count;
}
for (var i = 0;i<this.packages1.length;i++){
prices+=this.package2[i].price*this.package2[i].count;
}
return prices;
}
}
})
</script>
</body>
</html>
2.2、计算属性的getter方法和setter方法
每个计算属性都有getter和setter两种方法，分别是读取计算属性数据和修改计算属性数据的，如下示例
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
姓名：{{ fullName }}
</div>
<script>
var app=new Vue({
el:"#app",
data:{
firstname:'Jack',
lastname:'Green'
},
computed:{
fullName:{
<!--getter方法用于返回数据，最常用的方法-->get:function() {
return this.firstname + ' ' + this.lastname;
},
<!--setter方法用于修改计算属性依赖的数据，这个方法一般用不到-->set:function() {
var names = newValue.split(' ');
this.firstname = names[0];
this.lastname = names[names.length - 1];
}
}
}
});
</script>
</body>
</html>
2.3、计算属性小技巧
2.3.1、计算属性可以依赖其他计算属性
在Vue实例的计算属性中我们可以调用其他Vue实例中计算属性的返回值参与计算，如下示例
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<title>Vue 示例</title>
</head>
<body>
<div id="app1">
电子产品总价：{{ price1 }}
</div>
<div id="app2">
商品总价：{{ price }}
</div>
<script>
var app1=new Vue({
el:'#app1',
data:{
package1:[
{
name:'iPhone',
price:7199,
count:2
},
{
name:'iPad',
price:2888,
count:1
}
]
},
computed:{
price1:function() {
var price1=0;
for (var i=0;i<this.package1.length;i++) {
price1+=this.package1[i].price * this.package1[i].count;
}
return price1;
}
}
});
var app2=new Vue({
el:"#app2",
data:{
package2:[
{
name:'apple',
price:10,
count:1
},
{
name:'banana',
price:3,
count:3
}
]
},
computed:{
price:function() {
var price=0;
for (var i=0;i<this.package2.length;i++) {
price+=this.package2[i].price * this.package2[i].count;
}
<!--此处调用了名为app1的Vue实例中的计算属性price1参与计算，最终返回的price就是所有商品的总价-->price+=app1.price1;
return price;
}
}
})
</script>
</body>
</html>
2.3.2 计算属性可以依赖其他Vue实例的数据
就像在计算属性中可以调用其他Vue实例的计算属性返回值一样，同样的我们也可以调用其他Vue实例中的数据参与计算，如下示例
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<title>Vue 示例</title>
</head>
<body>
<div id="app1">
</div>
<div id="app2">
商品总价：{{ price }}
</div>
<script>
var app1=new Vue({
el:'#app1',
data:{
package1:[
{
name:'iPhone',
price:7199,
count:2
},
{
name:'iPad',
price:2888,
count:1
}
]
}
});
var app2=new Vue({
el:"#app2",
data:{
package2:[
{
name:'apple',
price:10,
count:1
},
{
name:'banana',
price:3,
count:3
}
]
},
computed:{
price:function() {
var price=0;
for (var i=0;i<this.package2.length;i++) {
price+=this.package2[i].price * this.package2[i].count;
}
for (var i=0;i<app1.package1.length;i++) {
price+=app1.package1[i].price * app1.package1[i].count;
return price;
}
}
})
</script>
</body>
</html>
3、计算属性缓存
在第二章中我们介绍过一个跟计算属性功能类似的属性methods，在methods属性中同样可以定义函数实现一样的功能，那么为什么还会有计算属性这个看似多余的属性呢，当然是因为这两者之间是有区别的，区别就在于methods属性不会缓存计算结果，每一次页面渲染都会重新调用methods属性中的函数进行计算，而计算属性则会讲计算结果缓存起来，只要它依赖的数据没有变化，无论页面渲染多少次都不会重新调用函数进行计算，因此methods适合用于逻辑简单，数据量小的场景，而当计算逻辑较为复杂，数据量很大时则需要使用计算属性讲结果缓存，提升用户体验。
以上是 Vue基础第三章 - 计算属性 的全部内容， 来源链接： utcz.com/z/374629.html
