03.vue3的计算属性

这篇具有很好参考价值的文章主要介绍了03.vue3的计算属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.计算属性

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

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

1.get()和set()

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

get()属性有以下特点:

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

set()属性的特点:

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

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

<template>
  <div>
    <h3>computed计算属性</h3>
    <input type="text" v-model="firstName"> -
    <input type="text" v-model="lastName"> = 
    <input type="text" v-model="fullName">
  </div>
</template>
<script setup>
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];
  }
})
</script>

2.computed的简写

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

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

<template>
  <div>
    <h3>computed计算属性</h3>
    <input type="text" v-model="firstName"> -
    <input type="text" v-model="lastName"> = 
    <input type="text" v-model="fullName">
      
    <p><input type="text" v-model="str"> </p>
    <h3>反转字符串:{{reverseStr}}</h3>
  </div>
</template>
<script setup>
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(""))
</script>

3.computed和methods对比

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

<template>
  <div>
  <h3>methods和computed对比</h3>
   <p>使用方法获取当前年龄:{{getAge()}}</p>
   <p>使用方法获取当前年龄:{{getAge()}}</p>
   <p>使用方法获取当前年龄:{{getAge()}}</p>


   <p>使用计算属性获取当前年龄:{{age}}</p>
    <p>使用计算属性获取当前年龄:{{age}}</p>
     <p>使用计算属性获取当前年龄:{{age}}</p>
  </div>
</template>
<script setup>
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();
})
</script>

03.vue3的计算属性

计算属性 computed总结:

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

文章来源地址https://www.toymoban.com/news/detail-413461.html

2.相关demo

1.全选和反选

<template>
  <div>
 	<table border="1" cellspacing="0" cellpadding="0">
				<tr>
					<th><input type="checkbox" v-model="isAllChecked" /> 全选</th>
					<th>商品名称</th>
					<th>商品价格</th>
					<th>商品数量</th>
				</tr>
				<tr v-for="item in iceCream" :key="item.id">
					<td><input type="checkbox" v-model="item.ischeck" /> </td>
					<td>{{item.name}}</td>
					<td>{{item.price}}</td>
					<td>{{item.num}}</td>
				</tr>
				<tr>
					<td>总计:</td>
					<td colspan="3">{{total}}</td>
				</tr>
	</table>
  </div>
</template>
<script setup>
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)

})
    
</script>

2.todos列表

<template>
  <div>
 	<h3>my todos list <span :class="active" v-if="complate!==list.length" >{{list.length-complate}}</span>  </h3>
	<input type="text" class="title"  placeholder="请输入新任务" v-model.trim="txt" @keydown.enter="addItem"   />
        <table class="todos">
				<tr>
					<th>#</th>
					<th>任务列表</th>
					<th>筛选</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item,index) in filterList" :key="item.id">
					<td>{{index+1}}</td>
					<td>{{item.text}}</td>
					<td><input type="checkbox" v-model="item.done" /> </td>
					<td>{{item.done?"完成":"未完成"}}</td>
					<td> <a href="#" @click="removeItem(item)">删除</a> </td>
				</tr>
			</table>
			<p><input type="checkbox"  v-model="allChecked"   /> 显示全部 </p>
			<p> 已完成 <strong>{{complate}}</strong> /总数 <strong>{{list.length}}</strong> </p>
  </div>
</template>
<script setup>
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')
				
		
</script>

到了这里,关于03.vue3的计算属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【正则表达式上】——03全栈开发——如桃花来

    正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特殊字符及这些特定字符的组合,组成一个 “规则字符串” , 这个“规则字符串”用来表达对字符串的一种 逻辑过滤。 非python独有 python里面是使用re模块来实现的,不需要额外进行安装,是python内置模

    2024年02月02日
    浏览(33)
  • 【源码系列#03】Vue3计算属性原理(Computed)

    专栏分享:vue2源码专栏,vue3源码专栏,vue router源码专栏,玩具项目专栏,硬核💪推荐🙌 欢迎各位ITer关注点赞收藏🌸🌸🌸 传入一个 getter 函数,返回一个默认不可手动修改的 ref 对象 或者传入一个拥有 get 和 set 函数的对象,创建一个可手动修改的计算状态 @issue1 compute

    2024年02月05日
    浏览(51)
  • Jmeter接口关联(三)【使用正则表达式提取值】以及正则表达式提取器中模板的含义及用法

    文章目录 前言 一、Jmeter中使用正则表达式匹配 1、选择 RegExp Tester 2、在线程组------》添加------》后置处理器-------里面添加一个“正则表达式提取器” 二、关于正则表达式提取器里面字段的解释 参数说明 三、进一步解释Jmeter正则表达式提取器中的模板 1、当模板设置为$0$ 

    2024年02月13日
    浏览(54)
  • 表达式求值问题-双栈模板化实现

            好久不见,真的很久都没有更新博客了,最近很多事情,所以比较忙碌,没有时间每天都学算法,但是我会挤时间尽量做到,每两三天就更新博客,我会努力的,加油~     前言:计算器都见过吧,我们今天要讲的就是类似于计算器计算数据的简单实现,我们需要注

    2024年02月03日
    浏览(44)
  • 【Spring Boot】Thymeleaf模板引擎 — 表达式的语法

    模板的主要作用是将后台返回的数据渲染到HTML中。那么Thymeleaf是如何解析后台数据的呢?接下来从变量、方法、条件判断、循环、运算(逻辑运算、布尔运算、比较运算、条件运算)方面学习Thymeleaf表达式支持的语法。 (1)文本赋值 赋值就是通过${}标签将后台返回的数据替

    2024年02月14日
    浏览(38)
  • 《Python数据分析技术栈》第03章 01 正则表达式(Regular expressions)

    《Python数据分析技术栈》第03章 01 正则表达式(Regular expressions) A regular expression is a pattern containing both characters (like letters and digits) and metacharacters (like the * and $ symbols). Regular expressions can be used whenever we want to search, replace, or extract data with an identifiable pattern, for example, dates, posta

    2024年01月20日
    浏览(52)
  • 《数据结构》:中缀表达式转后缀表达式 + 后缀表达式的计算

    补充了一个判断输入中缀表达式 合法性 的代码: 《数据结构》:中缀表达式合法性判断_Amentos的博客-CSDN博客   目录 一、基本概念 二、中缀表达式转后缀表达式    例       中缀表达式  2*(3+5)+7/1-4  转换为后缀表达式 三、后缀表达式的计算    例       后缀表达式

    2024年02月03日
    浏览(62)
  • 中缀表达式转后缀表达式,使用逆波兰计算。可以计算小数

    传递一个分开保存符号与数字的List即可:List SumNumber; 获取参数的构造方法如下: 要求的List保存数据的方式如下: 例如:1+2+3 然后使用 EvaluatePostfixExpressions 方法传递出一个保存好结果的String。

    2024年02月15日
    浏览(51)
  • 【C++进阶】C++11(下)可变参数模板&lambda表达式&包装器

    我们紧接着上一节的讲解来进行 C++11的新特性可变参数模板能够让您创建可以接受可变参数的函数模板和类模板,相比C++98/03,类模版和函数模版中只能含固定数量的模版参数,可变模版参数无疑是一个巨大的改进。然而由于可变模版参数比较抽象,使用起来需要一定的技巧

    2024年04月11日
    浏览(86)
  • 【日志解析】【频率分析】ULP:基于正则表达式和本地频率分析进行日志模板提取

    1 论文出处 会议:International Conference on Software Maintenance and Evolution(ICSME) 级别:CCF-B 时间:2022 2 背景 2.1 背景介绍   日志文件包括大量关于软件系统执行的信息,用于帮助处理不同的软件工程活动,生成的日志事件主要由两部分组成:日志头和日志消息。解析日志消息需

    2024年02月09日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包