Vue 计算属性（computed）
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 计算属性（computed）
目录
计算属性
简单示例
字符串方法实现
计算属性实现
计算属性-改造案例
模糊查询
购物车-计算金额改造
总结
计算属性
Vue 的计算属性（computed properties）是一种特殊的属性，它依赖于其他数据属性，当这些依赖的数据属性发生变化时，计算属性的值会自动更新。计算属性允许你在模板中声明式地处理复杂逻辑，而不是在模板中直接编写复杂的表达式或方法调用。
简单示例
做一个简单基本的一个计算属性示例。赋值小写字母，显示首字母大写。
字符串方法实现
使用函数方法直接在原地处理业务。
示例如下：
<script src="../lib/vue.js"></script>
<div id="box">
{{name.substring(0, 1).toUpperCase() + name.substring(1)}}
</div>
<script>
let vm = new Vue({
el : '#box',
data: {
name : 'zhangsan'
}
})
</script>这样实现，业务逻辑比较混乱，延展性可维护性差。
计算属性实现
计算属性(防止模板过重难以维护)，负责逻辑放在计算属性中来写。
计算属性，有缓存，基于依赖的缓存。
示例如下：
<script src="../lib/vue.js"></script>
<div id="box">
{{computedName}}
</div>
<script>
let vm = new Vue({
el : '#box',
data: {
name : 'zhangsan',
},
// 计算属性
computed:{
computedName() {
return this.name.substring(0,1).toUpperCase() + this.name.substring(1)
}
}
})
</script>计算属性有缓存，而方法没有，同样调用三次的话，方法会调用三次；
而计算属性值未改变只会调用一次。
计算属性-改造案例
使用计算属性改造之前的案例。
模糊查询
改造上面的过滤应用所做的模糊查询案例。使用计算属性处理，而不再使用原有的方法处理。
示例如下：
<script src="../lib/vue.js"></script>
<div id="box">
<input type="text" v-model="mytext">
<ul>
<li v-for="item in computedList" :key="item">
{{item}}
</li>
</ul>
</div>
<script>
let vm = new Vue({
el:'#box',
data: {
mytext:'',
datalist:['aa', 'bb', 'cc', 'dd', 'ee', 'de']
},
computed: {
computedList() {
return this.datalist.filter(item=> item.includes(this.mytext))
}
}
})
</script>购物车-计算金额改造
修改实战购物车的案例，使用计算属性进行优化。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.next.js"></script>
<style>
li {
display:flex;
justify-content: space-around;
padding: 10px;
}
li img {
width:100px;
}
</style>
</head>
<body>
<div id="box">
<input type="checkbox" v-model="isAll" @change="allGoods"> 全选/全不选
<ul>
<li v-for="(item, index) in datalist" :key="item.id">
<input type="checkbox" v-model="checkList" :value="item" @change="itemGoods">
<img :src="item.pic" alt="">
<div>
<div>{{item.name}}</div>
<div style="color:blue">￥{{item.price}}</div>
</div>
<div>
<button @click="item.number--" :disabled="item.number === 1">-</button>
<span>{{item.number}}</span>
<button @click="item.number++" :disabled="item.number === item.limit">+</button>
</div>
<div>
<button @click="handleDelGoods(index, item.id)">删除</button>
</div>
</li>
</ul>
<div>总金额：{{ computedSum }}</div>
</div>
<script>
let obj = {
computed: {
computedSum() {
let total = 0
// 累加计算 checkList 数组中的每一项的 价格*数量
this.checkList.forEach(item => {
total += item.price * item.number
})
return total
}
},
data() {
return {
checkList: [], // 勾选购物车的数据
isAll : false,
datalist: [{
id:1,
name:"商品1",
price: 10,
number:1,
limit:5, //限购
pic: "http://localhost:63342/WWW/images/1.jpg"
},
{
id:2,
name:"商品2",
price: 20,
number:2,
limit:6, //限购
pic: "http://localhost:63342/WWW/images/2.jpg"
},
{
id:3,
name:"商品3",
price: 30,
number:3,
limit:7, //限购
pic: "http://localhost:63342/WWW/images/3.jpg"
},
{
id:4,
name:"商品4",
price: 40,
number:4,
limit:8, //限购
pic: "http://localhost:63342/WWW/images/4.jpg"
}
]
}
},
methods : {
handleDelGoods(index, id) {
// 删除的是datalist-根据 index
this.datalist.splice(index, 1)
// 删除checklist-根据id
this.checkList = this.checkList.filter(item=>item.id !== id)
// 同步一下状态
this.itemGoods()
},
allGoods() {
if (this.isAll) {
this.checkList = this.datalist
} else {
this.checkList = []
}
},
itemGoods() {
if (this.checkList.length === this.datalist.length) {
this.isAll = true
} else {
this.isAll = false
}
}
}
}
Vue.createApp(obj).mount("#box");
</script>
</body>
</html>总结
Vue 渐进式JavaScript 框架 基于Vue3的学习笔记 - Vue 计算属性（computed）