一、计算属性的基本使用
- 计算属性：一个特殊属性，值依赖于另外一些数据动态计算出来。
- 🚩🚩🚩计算属性特点：函数内使用的变量改变，重新计算结果返回。
- 💣💣💣注意：
①、计算属性必须定义在computed节点中。
②、计算属性必须是一个function，计算属性必须有返回值。
③、计算属性不能被当当作方法调用，要作为属性来使用。
computed:{
"计算属性名"(){
return "值"
}
}
<template>
<div>
<p>和为：{{ num }}</p>
</div>
</template>
- 计算属性也是属性, 所以不要和data里重名, 用起来也和data类似
（一）全选反选案例
<template>
<div>
<span>全选:</span>
<input type="checkbox" v-model="ck" />
<ul>
<li>
<input type="checkbox" />
<span>名字</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{
name: "猪八戒",
c: false,
},
{
name: "孙悟空",
c: false,
},
{
name: "唐僧",
c: false,
},
{
name: "白龙马",
c: false,
},
],
};
},
};
</script>
<style>
</style>
<template>
<div>
<span>全选:</span>
<input type="checkbox" v-model="ck" />
<ul>
<li v-for="(item,i) in arr" :key="i">
<input type="checkbox" v-model="item.c"/>
<span>{{item.name}}</span>
</li>
</ul>
</div>
</template>
📢📢📢（1）小选决定大选，大选被小选算计出来
方法一 —— forEach循环
<template>
<div>
<span>全选:</span>
<input type="checkbox" :checked="bigCk" />
<ul>
<li v-for="(item, i) in arr" :key="i">
<input type="checkbox" v-model="item.c" />
<span>{{ item.name }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{
name: "猪八戒",
c: true,
},
{
name: "孙悟空",
c: false,
},
{
name: "唐僧",
c: false,
},
{
name: "白龙马",
c: false,
},
],
};
},
computed:{
bigCk(){
let key;
let num=0;
this.arr.forEach(item =>{
if(item.c==true){
num++;
}
});
if(num==this.arr.length){
key = true;
}else{
key = false;
}
return key;
}
},
};
</script>
方法二 —— every方法
①、【计算属性的简单写法】
- 🤔🤔🤔every()方法是数组对象的一个方法，它用于检测数组中的所有元素是否都满足某个条件，如果所有元素都满足条件，则返回true，否则返回false。
ck(){
return this.arr.every(item => item.c==true)
}
②、【完整写法】
ck:{
get(){
return this.arr.every(item => item.c==true);
}
}
📢📢📢（2）全选算计小选
<template>
<div>
<span>全选:</span>
<input type="checkbox" v-model="ck" />
<ul>
<li v-for="(item, i) in arr" :key="i">
<input type="checkbox" v-model="item.c" />
<span>{{ item.name }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{
name: "猪八戒",
c: true,
},
{
name: "孙悟空",
c: false,
},
{
name: "唐僧",
c: false,
},
{
name: "白龙马",
c: false,
},
],
};
},
computed:{
ck:{
get(){
return this.arr.every(item => item.c==true);
},
set(val){
this.arr.forEach(item =>item.c=val);
}
}
},
};
</script>
- 🔔🔔🔔注意：
什么时候用计算属性：
①、简单写法：发现某个值，被算计出来！！
②、完整写法：除了被算计，还要算计别人！！
（二）计算属性的设置问题—完整写法
- ✅✅✅计算属性默认情况下只能获取，不能修改。
- ✅✅✅要给计算属性赋值，就必须写计算属性的完整写法！！
computed:{
full:{
get(){
...
},
set(value){
...
}
}
}
- 💭💭💭什么时候用计算属性完整写法？ 给计算属性变量赋值时。
（三）不用计算属性，用函数调用能实现吗？计算属性优势在哪里？
📢📢📢（1）计算属性的缓存说明
- 🍂🍂🍂计算属性，基于依赖项的值进行缓存，依赖的变量不变，都直接从缓存取结果。
- 计算属性如果被多次使用，性能极高。
<template>
<div>
<ul>
<li v-for="(item,i) in list" :key="i"> {{ item }}</li>
</ul>
<h1>总分由方法调用:{{ zf() }}</h1>
<h1>总分由方法调用:{{ zf() }}</h1>
<h1>总分由方法调用:{{ zf() }}</h1>
<h1>总分由计算属性:{{ jszf }}</h1>
<h1>总分由计算属性:{{ jszf }}</h1>
<h1>总分由计算属性:{{ jszf }}</h1>
</div>
</template>
<script>
export default {
data(){
return{
list:[88,99,100]
}
},
methods:{
zf(){
console.log("方法调用")
return this.list.reduce((sum,item) => sum+=item,0);
}
},
computed:{
jszf(){
console.log("计算属性")
return this.list.reduce((sum,item) => sum+=item,0);
}
}
}
</script>
📢📢📢（2）优势
- 🍗🍗🍗计算属性特点？
①、计算后会立刻缓存，下次直接读缓存
②、依赖项改变, 函数会重新执行 并 重新缓存 - 多次使用计算属性，性能会极高
