一个项目学习Vue3---Vue计算属性

观察下面一段代码,学习Vue计算属性

<template><div><span>用户大于10岁的数量:{{ userVue.filter(user=>user.age>10).length}}</span><span>用户大于10岁的数量2:{{ userAgeltTen}}</span><span>用户大于10岁的数量3:{{ userAgeltTenMethod()}}</span><span>用户姓名:{{ fullName }}</span><button @click="nameChange">姓名变化</button></div>
</template>
<script lang="ts" setup>
import { log } from 'console'
import { computed, nextTick } from 'vue'
import { ref } from 'vue'
import { reactive } from 'vue'
//定义一个数组
let users = [{userName: 'zhangsan',age: 9,sex: 'man'},{userName: 'lisi',age: 12,sex: 'woman'}
]let userVue = reactive(users)const userAgeltTen = computed(() => {console.log("计算属性执行了")return userVue.filter(user=>user.age>10).length
})function userAgeltTenMethod(){console.log("方法执行了")return userVue.filter(user=>user.age>10).length
}
//因为模板调用了一次,计算属性没有再次执行而是返回来结果
console.log(userAgeltTen.value)
//方法再一次执行了
console.log(userAgeltTenMethod())const firstName = ref("王")
const lastName = ref("五")const fullName = computed( {get(){return firstName.value+","+lastName.value},set(names){[firstName.value,lastName.value] = names.split(" ")}
})function nameChange(){fullName.value = "赵 六"
}
</script><style scoped>
</style>

它的输出如下图:

Vue 3 中的计算属性与 Vue 2 中的类似,但有一些重要的改进和变化。计算属性是依赖于响应式数据的属性,它们会根据其依赖的数据动态计算得出最新的值,类似于一个缓存机制,只有在依赖发生变化时才会重新计算。

在 Vue 3 中,计算属性的定义依然使用 computed 函数,但是有几个重要的改变:

  1. 使用 computed 函数: 在 Vue 3 中,你可以使用 computed 函数来创建计算属性,而不再是使用对象的方式。

    import { computed } from 'vue';export default {setup() {const count = ref(1);const squaredCount = computed(() => count.value * count.value);return {count,squaredCount};}
    };
    
  2. Composition API 的优势: Vue 3 引入了 Composition API,这使得计算属性的定义更加灵活和易于组织。你可以在 setup 函数中使用 computed 函数,并且可以更方便地管理相关的依赖和逻辑。

  3. 缓存机制: 计算属性会自动缓存其返回值,只有在它的相关依赖项变化时才会重新计算。这一点与 Vue 2 中的计算属性相同,但在使用 Composition API 时更加明确和灵活。

总结来说,Vue 3 的计算属性依然是响应式的,但是在使用方式和性能上有一些优化和改进,尤其是在使用 Composition API 时更加灵活和清晰。

为什么要用计算属性?

核心就是计算属性会用到缓存,当监控值变量没有发生任何变化时,调用计算方法,不会执行函数内的内容,而是会立即返回结果:

<span>用户大于10岁的数量2:{{ userAgeltTen}}</span>
<span>用户大于10岁的数量3:{{ userAgeltTenMethod()}}</span>const userAgeltTen = computed(() => {console.log("计算属性执行了")return userVue.filter(user=>user.age>10).length
})function userAgeltTenMethod(){console.log("方法执行了")return userVue.filter(user=>user.age>10).length
}
//因为模板调用了一次,计算属性没有再次执行而是返回来结果
console.log(userAgeltTen.value)
//方法再一次执行了
console.log(userAgeltTenMethod())

上面一段代码中,"计算属性执行了",只会输出一次,而"方法执行了",他会输出两次,原因是html中调用第一次后,console.log再次进行调用的时候会直接拿缓存中的值,而不是重新去计算一次,而方法就不行,方法每次调用都会去重新计算

计算属性的Get和Set

const firstName = ref("王")
const lastName = ref("五")const fullName = computed( {get(){return firstName.value+","+lastName.value},set(names){[firstName.value,lastName.value] = names.split(" ")}
})function nameChange(){fullName.value = "赵 六"
}

计算属性的值也可以直接使用.value进行赋值,调用计算属性的.value方法,会直接调用fullName的计算属性的set方法,在计算属性中的[firstName.value,lastName.value]这两个值也会重新赋值

    关注公众号:资小库,问题快速答疑解惑

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/40889.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于轨迹信息的图像近距离可行驶区域方案验证

一 图像可行驶区域方案 1.1 标定场景 1.2 标定步骤 设计一定间距标定场&#xff0c;在标定场固定位置设置摄像头标定标识点。主车开到标定场固定位置录制主车在该位置各个摄像头数据&#xff0c;通过摄像头捕获图像获取图像上关键点坐标pts-2d基于标定场设计&#xff0c;计算…

保函到期提醒是银行或金融机构提供的一项服务,旨在确保客户及时了解保函即将到期的情况,从而避免因保函过期而导致的风险或违约责任。

保函到期提醒是银行或金融机构提供的一项服务&#xff0c;旨在确保客户及时了解保函即将到期的情况&#xff0c;从而避免因保函过期而导致的风险或违约责任。以下是保函到期提醒的一些关键方面&#xff1a; 1. **保函定义**&#xff1a; - 保函是一种由银行出具的书面承诺&…

vue实现左右拖动分屏

效果图如下&#xff1a; 封装组件 <template><div ref"container" class"container"><div class"left-content" :style"leftStyle">/**定义左侧插槽**/<slot name"left"></slot></div>…

Springboot+Vue3开发学习笔记《2》

SpringbootVue3开发学习笔记《2》 博主正在学习SpringbootVue3开发&#xff0c;希望记录自己学习过程同时与广大网友共同学习讨论。 总共涉及两部分&#xff0c;第一部分为基础部分学习&#xff0c;第二部分为实战部分。 一、学习路径 1.1 基础部分 配置文件整合MyBatisBea…

中英双语介绍美国的州:阿拉斯加州(Alaska)

中文版 阿拉斯加州&#xff08;Alaska&#xff09;位于美国西北角&#xff0c;是美国面积最大的州&#xff0c;以其壮丽的自然景观、丰富的矿产资源和独特的野生动物闻名。以下是对阿拉斯加州的详细介绍&#xff0c;包括其地理位置、人口、经济、教育、文化和主要城市。 地理…

QQ聊天记录删除了怎么恢复?这4个方法让你秒找回!

在现代社会&#xff0c;QQ已经成为我们日常交流和工作中不可或缺的沟通工具。然而&#xff0c;有时我们可能会不小心删除了重要的聊天记录&#xff0c;这会带来诸多不便甚至困扰。那么&#xff0c;当你发现自己误删了数据&#xff0c;qq聊天记录删除了怎么恢复呢&#xff1f;有…

第14届蓝桥杯Python青少组中/高级组选拔赛(STEMA)2022年8月21日真题

第14届蓝桥杯Python青少组中/高级组选拔赛&#xff08;STEMA&#xff09;2022年8月21日真题 题目总数&#xff1a;5 总分数&#xff1a;128 更多真题下载点我&#x1f446; 编程题 第 1 题 问答题 编程实现&#xff1a; 给定一个正整数&#xff0c;输出正整数个位上的…

tsconfig.json的include和exclude作用

tsconfig.json中的include和exclude属性用于指定需要被编译的TypeScript文件和需要被排除的文件。‌ include属性&#xff1a;‌用于指定哪些.ts、‌.tsx或.d.ts文件需要被编译。‌如果不指定include属性&#xff0c;‌则默认当前目录下除了exclude之外的所有.ts、‌.d.ts、‌…

昇思25天学习打卡营第11天|LSTM+CRF序列标注

序列标注指给定输入序列&#xff0c;给序列中每个Token进行标注标签的过程。序列标注问题通常用于从文本中进行信息抽取&#xff0c;包括分词(Word Segmentation)、词性标注(Position Tagging)、命名实体识别(Named Entity Recognition, NER)等。 和人理解语言一样&#xff0c…

2024-07-04 base SAS programming学习笔记8(HTML)

当使用ODS来进行结果或数据集输出的时候&#xff0c;可以同时设置多个ODS 命令&#xff0c;同时输出到多个不同的文件。使用_ALL_ 表示关闭所有的ODS输出窗口&#xff0c;比如&#xff1a; ods html file(body)"html-file-pathname"; ods html file"pdf-file-pa…

【C#】如何在窗体程序中调用多行CMD命令

【背景】 用VS写一个C#窗体程序&#xff0c;第一步需要用CMD启动一个外部服务并发送信息给该服务器&#xff0c;涉及两步命令&#xff0c;第一步是启动服务&#xff0c;第二步是发送信息。 【分析】 要点&#xff1a; 如何指定启动CMD的路径在服务exe所在路径下&#xff1b…

中国东方资产管理25届秋招北森测评笔试如何高分通过?真题考点分析看完这篇就够了

一、东方资管校招测评题型分析 中国东方资产管理股份有限公司&#xff08;中国东方资管&#xff09;的校园招聘测评题型主要包括以下几个部分&#xff1a; 1. **计分题&#xff0c;行测知识**&#xff1a;这部分题量大约在56-57题左右&#xff0c;分为不同的模块进行计时测试。…

Spzhi知识付费社区主题免费下载

主题介绍 用typecho打造一款知识付费社区主题&#xff0c;带会员功能&#xff0c;为内容创业者提供知识变现一站式解决方案&#xff0c;让用户沉淀到自己的平台&#xff0c;形成自己的私域流量池&#xff0c;打造流量闭环&#xff0c;零门槛搭建你的移动网络课堂 主题功能 支…

SpringBoot Task 定时任务

springboot中使用Task定时任务非常简单 springboot 中自带的都有注解不需要引入依赖 第一步&#xff1a;在启动类上添加启用定时任务注解 EnableScheduling //开启任务调度 第二步&#xff1a;创建一个springboot组件用于定时任务管理 package cn.lsy.api.Task;import cn.ls…

论文解读——如何生成高分辨率图像PGGAN

论文&#xff1a;Progressive Growing of GANs for Improved Quality, Stability, and Variation&#xff08;2017.10&#xff09; 作者&#xff1a;Tero Karras, Timo Aila, Samuli Laine, Jaakko Lehtinen 链接&#xff1a;https://arxiv.org/abs/1710.10196 代码&#xff1a…

前端必知的跨站脚本攻击(XSS)示例与解决方案

跨站脚本攻击&#xff08;Cross-Site Scripting&#xff0c;通常缩写为XSS&#xff09;是一种常见的网络安全漏洞&#xff0c;它允许攻击者将恶意脚本注入到其他用户会浏览的页面中。 XSS攻击的示例代码可以帮助我们了解攻击者可能使用的技术。但请注意&#xff0c;了解这些示例…

MyBatis中resultMap与resultType区别

在MyBatis中&#xff0c;resultType 和 resultMap 都是用来定义查询结果如何被映射到Java对象上的&#xff0c;但它们的使用场景和方式有所不同。 resultType 含义: resultType 是一个简化的结果映射方式&#xff0c;用于直接将查询结果映射到一个已知类型的Java Bean或基本…

idea删除分支并同步到gitLab以及gitLab上的分支删除

目录 idea删除分支并同步到gitLab 方法一&#xff08;推荐&#xff09; 方法二&#xff08;命令行&#xff09; gitLab上的分支删除 前言-与正文无关 ​ 生活远不止眼前的苦劳与奔波&#xff0c;它还充满了无数值得我们去体验和珍惜的美好事物。在这个快节奏的世界中&…

初入Node.js必备知识

Node.js因什么而生&#xff0c;作用是干什么&#xff1f; Node.js是一个用c和c打造的一个引擎&#xff0c;他能够读懂JavaScript&#xff0c;并且让JavaScript能够和操作系统打交道的能力 JavaScript 原本只能在浏览器中运行,但随着Web应用程序越来越复杂,仅靠客户端JavaScri…