03.vue3的计算属性

文章目录

- 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被调用了");
    return  firstName.value+'-'+lastName.value
  },
  set(value){
    console.log("set被触发了");
    //根据fullname的值重新设置firstName和lastName
    const 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 readonly
const fullName=computed(function(){
   return  firstName.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);

  }
})
//计算列表选中项的和
const  total=computed(()=>{
  return iceCream.reduce((cur,val)=>{
    if(val.ischeck){
      return cur+val.num*val.price;
    }else{
      return cur;
    }
  },0)

})

全选	商品名称	商品价格	商品数量
	{{item.name}}	{{item.price}}	{{item.num}}
总计:	{{total}}

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
					}
				],

})
const  txt=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++;
				}
   //删除一项数据:
 const  removeItem=(item)=>{
				//根据当前点击这一项的id,查找在列表中的位置
				const index=list.findIndex(el=>el.id==item.id);
				list.splice(index,1)
			}

   //统计完成的个数
 const	complate=computed(()=>list.filter(el=>el.done).length)	
						
  //根据条件筛选列表
 const	filterList=computed(()=>{
  console.log(allChecked.value)
  return list.filter(el=>!el.done||allChecked.value)
  })
	//计算添加的类名
  const	active = computed(()=>list.length-complate>3?'danger':'waring')