目录
概念
作用
语法
使用方法
使用示例
计算属性的优势
**完整写法
**示例：多选框全选反选
概念
基于现有的数据，计算出来的新数据；当现有的数据变化，会自动重新计算。
作用
封装一段基于现有数据，计算求的一个新数据
语法
写在computed函数中，必须返回，作为属性直接使用。
- js中获取计算属性：计算属性.value。
- 模板中使用计算属性：{{计算属性}}。
import {computed} from 'vue'
const 新数据 = computed( ()=>{
//编写计算代码
return 结果
})
使用方法
计算属性的结果用法与ref/reactive响应式数据用法一样，既可以配合插值，也可以配合指令使用。
在js中要获取计算属性，需要通过 计算属性.value
使用示例
效果：
具体代码：
这里使用了快速计算一个数组的和reduce方法
goodList.value.reduce((acc,cur)=>{return acc+cur.price},0)
第二个参数0,是给acc初始化，随后进行累加
<h3>水果清单</h3><table><thead><tr><th>名字</th><th>价格</th></tr></thead><tbody><tr v-for="item in goodList" :key="item.id"><td>{{ item.name }}</td><td>{{ item.price }}</td></tr></tbody></table><p>总价：{{ totalPrice }}</p>
</template><script setup>import {computed,ref} from 'vue'const goodList=ref([{id:1,name:'apple',price:10},{id:2,name:'banana',price:20},{id:3,name:'orange',price:30},])const totalPrice=computed(()=>{if(goodList.length===0){return 0}return goodList.value.reduce((acc,cur)=>{return acc+cur.price},0)})</script><style>table{width: 350px;border:1px solid #333;}table th,table td{width: 50%;border: 1px solid #333;}table td{text-align: center;}
</style>计算属性的优势
带缓存：如果依赖的值没有发生变化，多次调用，函数体只会在第一次调用时执行；当依赖发生变化时，计算属性才会重新计算，并缓存新的结果。
**完整写法
上述的写法是简易的写法，计算属性是只读的，只能展示，不能修改值（界面视图上修改），因此当我们需要修改计算属性的时候，就需要用到完整写法：get、set
const total=computed({
//使用计算属性的时候，自动触发get，get内部必须返回计算结果
get(){
return 计算结果
},
//修改计算属性自动触发set，val参数表示要给计算属性赋予的值
set(value){
计算结果=value
}
})
这里修改计算属性时，也就是当计算属性配合v-moel的时候
**示例：多选框全选反选
- 当所有选项都被勾选时，全选框自动勾选
- 当全选框勾选时，所有选项都被勾选
- 当全选框取消勾选时，所有选项都被取消勾选
- 点击反选按钮时，所有选项反选
效果如下：
具体代码：
<template><p><span>//v-model和计算属性的配合使用<input type="checkbox" id="all" v-model="allChecked"/><label for="all">全选</label></span><button @click="plantList.forEach(item => item.completed = !item.completed)">反选</button></p><ul><li v-for="item in plantList" :key="item.id"><input type="checkbox" v-model="item.completed" /><span :class="{completedClass:item.completed}">{{ item.name }}</span></li></ul>
</template><script setup>import { ref ,computed} from 'vue'const plantList = ref([{ id: 1, name: '跑步', completed: false },{ id: 2, name: '打球', completed: false },{ id: 3, name: '游泳', completed: true },{ id: 4, name: '健身', completed: false },])const allChecked = computed({get(){//every方法返回布尔值，true表示所有元素都满足条件，false表示有元素不满足条件 return plantList.value.every(item => item.completed)},set(value){plantList.value.forEach(item => item.completed = value)}})</script><style lang="scss">*{margin: 0;padding: 0;}#app{width: 400px;max-width: 100px auto;padding:15px 18px;background: rgb(4, 250, 218);p{display: flex;justify-content: space-between;align-items: center;height: 40px;border-bottom: 1px solid #ccc;button{padding:3px 6px; }input{margin-right: 8px;}}ul{li{display: flex;justify-content: space-between;align-items: center;height: 40px;border-bottom: 1px solid #ccc;span.completed{color:#ddd;text-decoration: line-through;}}}}ul{list-style: none;}.completedClass{color:#04c1fb;}
</style>
