文章目录

    • 1.计算属性
      • 1.get()和set()
      • 2.computed的简写
      • 3.computed和methods对比
    • 2.相关demo
      • 1.全选和反选
      • 2.todos列表

1.计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性。

简单来说计算属性可以理解为:要用的属性不存在，要通过已有属性计算得来.底层借助了Object.defineproperty方法提供的getter和setter。

1.get()和set()

计算属性默认有自己的get()和set().

get()属性有以下特点:

(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。

set()属性的特点:

(1)当给计算属性设置值的时候会触发set()

(2)如果计算属性要被修改，那必须写set函数去响应修改,set函数可以接收用户修改计算属性的值

computed计算属性
 - = import {ref,reactive,computed} from "vue"const firstName=ref("马");const lastName=ref("丽");const fullName=computed({get(){console.log("get被调用了");returnfirstName.value+'-'+lastName.value},set(value){console.log("set被触发了");//根据fullname的值重新设置firstName和lastNameconst newArr=value.split("-");firstName.value=newArr[0];lastName.value=newArr[1];}})

2.computed的简写

在多数情况下我们只考虑读取不考虑修改，可以把set部分删掉,直接改写成函数的形式.

计算属性最终会出现在实例上，直接读取使用即可,不需要()调用

computed计算属性
 - = 
 
反转字符串:{{reverseStr}}
import {ref,reactive,computed} from "vue" //不考虑给fullname设置值//此时如果给fullname赋值会报一个警告:Write operation failed: computed value is readonlyconst fullName=computed(function(){ returnfirstName.value+'-'+lastName.value})//反转字符串const str=ref("hello");const reverseStr=computed(()=> str.value.split("").reverse().join(""))

3.computed和methods对比

与methods实现相比，computed内部有缓存机制（复用），效率更高，调试方便。

methods和computed对比
 
使用方法获取当前年龄:{{getAge()}}
 
使用方法获取当前年龄:{{getAge()}}
 
使用方法获取当前年龄:{{getAge()}}
 
使用计算属性获取当前年龄:{{age}}
使用计算属性获取当前年龄:{{age}}
 
使用计算属性获取当前年龄:{{age}}
import {ref,reactive,computed} from "vue"const bir=ref("2016/5/20");//使用方法获取当前周岁const getAge=()=>{console.log("methods");return new Date().getFullYear()-new Date(bir.value).getFullYear()}//使用计算属性获取当前周岁const age=computed(()=>{console.log("computed")return new Date().getFullYear()-new Date(bir.value).getFullYear();})

计算属性 computed总结:

(1)computed计算属性,是通过计算得出来的属性 是依赖data中的值,如果依赖的值变化,计算属性也会发生变化(2)computed是有缓存的,只要数据不发生变化,直接从缓存中读取值即可,只有当值发生变化的时候才会重新计算(3)computed 有get属性还有set属性.大部分情况是读取值,所以设置值很少用到,这时可以简写,只获取get的值即可(只读)

​

2.相关demo

1.全选和反选

 
 全选商品名称商品价格商品数量
 {{item.name}}{{item.price}}{{item.num}}
总计:{{total}}
import {ref,reactive,computed} from "vue"//iceCreame的相关操作const { iceCream } = reactive({iceCream: [{id: 98,name: '哈根达斯',num: 10,price: 98,ischeck: false},{id: 56,name: '八喜',num: 1,price: 48,ischeck: true},{id: 102,name: '冰雪皇后',num: 1,price: 29,ischeck: false},{id: 106,name: '蒙牛',num: 10,price: 4,ischeck: true}]})//实现反选和全选const isAllChecked=computed({get(){console.log("触发了get");return iceCream.every(el=>el.ischeck);},set(value){console.log("触发了set",value);iceCream.forEach(el=>el.ischeck=value);}})//计算列表选中项的和consttotal=computed(()=>{return iceCream.reduce((cur,val)=>{if(val.ischeck){return cur+val.num*val.price;}else{return cur;}},0)})

2.todos列表

 
my todos list {{list.length-complate}}
#任务列表筛选状态操作
{{index+1}}{{item.text}} {{item.done" /> 删除 
 显示全部 
 已完成 {{complate}} /总数 {{list.length}} 
import {ref,reactive,computed} from "vue"const{list}=reactive({list:[{id:1,text:"吃饭",done:true},{id:2,text:"睡觉",done:false},{id:3,text:"打豆豆",done:true}],})consttxt=ref(""); const nextId=ref(4); const allChecked=ref(false);//添加一项任务const addItem=()=>{//如果输入框为空,不做任何操作if(!txt.value) return;var obj={ id:nextId.value, text:txt.value, done:false}list.push(obj);txt.value="";nextId.value++;} //删除一项数据: constremoveItem=(item)=>{//根据当前点击这一项的id,查找在列表中的位置const index=list.findIndex(el=>el.id==item.id);list.splice(index,1)} //统计完成的个数 constcomplate=computed(()=>list.filter(el=>el.done).length)//根据条件筛选列表 constfilterList=computed(()=>{console.log(allChecked.value)return list.filter(el=>!el.done||allChecked.value)})//计算添加的类名constactive = computed(()=>list.length-complate>3?'danger':'waring')