第4集丨Vue 江湖 —— 计算属性
目录
- 一、基本使用
- 1.1 在computed中定义
- 1.1.1 案例
- 1.1.2 控制台调用getter
- 1.1.3 控制台中的data和computed
- 1.2 缓存效果
- 1.3 完整写法
- 1.3.1 案例
- 1.3.2 效果图
- 1.4 简写形式
- 二、案例的其他实现
- 2.1 methods实现
- 2.2 插值语法实现
- 三、体会计算属性的好处
- 3.1 复杂任务时
- 3.2 使用计算属性
- 3.3 computed vs methods
- 四、计算属性汇总
计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。
一、基本使用
1.1 在computed中定义
下面案例,在computed中定义了一个计算属性,名为:fullName,其所依赖的属性为:firstName 和 lastName。
并且定义了getter,如果getter被调用,会打印出:get被调用了!
1.1.1 案例
<div id="root"><div class="row">姓:<input type="text" v-model="firstName"></div><div class="row">名:<input type="text" v-model="lastName"></div>
</div>
<script>const vm = new Vue({el:'#root',data:{firstName: '小',lastName: '三'},computed:{fullName:{get() {console.log('get被调用了!');// console.log(this);return this.firstName+'-'+this.lastName}}}});</script>
1.1.2 控制台调用getter
打开控制台,输入vm 回车,会发现计算属性fullName已经在vm实例上了。并且会发现此时该属性的值,看不到,有三个点...,点击才能看到,也就是getter被调用了。

1.1.3 控制台中的data和computed
打开控制台,我们可以很方便的看到data和computed的属性

1.2 缓存效果
下面案例中,get只会被调用一次,其余的会从缓存中读取。控制台只会打印出一次get被调用了!
<div id="root"><div class="row">姓:<input type="text" v-model="firstName"></div><div class="row">名:<input type="text" v-model="lastName"></div><div class="row">全名:<span>{{fullName}}</span></div><div class="row">全名:<span>{{fullName}}</span></div><div class="row">全名:<span>{{fullName}}</span></div><div class="row">全名:<span>{{fullName}}</span></div>
</div>
<script>const vm = new Vue({el:'#root',data:{firstName: '小',lastName: '三'},computed:{fullName:{get() {console.log('get被调用了!');// console.log(this);return this.firstName+'-'+this.lastName}}}});</script>
1.3 完整写法
- 增加了
setter的定义 - 通过
控制台修改计算属性fullName此时会看到setter被调用了,并修改了所依赖的属性firstName和lastName。对于Vue来讲,data中的任何一个数据发生变化的时候,Vue的模板都会重新解析一遍。因此,由于这两个属性发生了变化,其对应getter就会被调用。
1.3.1 案例
<div id="root"><div class="row">姓:<input type="text" v-model="firstName"></div><div class="row">名:<input type="text" v-model="lastName"></div><div class="row">全名:<span>{{fullName}}</span></div><div class="row">全名:<span>{{fullName}}</span></div><div class="row">全名:<span>{{fullName}}</span></div><div class="row">全名:<span>{{fullName}}</span></div>
</div>
<script>const vm = new Vue({el:'#root',data:{firstName: '小',lastName: '三'},computed:{fullName:{get() {console.log('get被调用了!');// console.log(this);return this.firstName+'-'+this.lastName},set(value) {console.log('set',value);const arr = value.split("-");this.firstName = arr[0];this.lastName = arr[1];}}}});
</script>
1.3.2 效果图
我们在控制台中,输入vm.fullName='李-四' 回车,就会看到如下效果。

1.4 简写形式
计算属性 一般不做修改。如果只读不改,计算属性就可以写成简写的形式。这时不再是一个对象了,而是用函数代替且就为get函数。
<div id="root"><div class="row">姓:<input type="text" v-model="firstName"></div><div class="row">名:<input type="text" v-model="lastName"></div><div class="row">全名:<span>{{fullName}}</span></div>
</div><script>const vm = new Vue({el:'#root',data:{firstName: '小',lastName: '三'},computed:{fullName() {console.log('get被调用了!');return this.firstName+'-'+this.lastName}}});
</script>
二、案例的其他实现
2.1 methods实现
在methods中定义了fullName函数来实现
<div id="root"><div class="row">姓:<input type="text" v-model="firstName"></div><div class="row">名:<input type="text" v-model="lastName"></div><div class="row">全名:<span>{{fullName()}}</span></div>
</div><script>const vm = new Vue({el:'#root',data() {// data中的任何一个数据发生变化的时候,Vue的模板都会重新解析一遍return {firstName: '小',lastName: '三'};},methods:{fullName(){// this就是vm实例// console.log(this);console.log("fullName函数被调用了!");return this.firstName+"-"+this.lastName;}}});
</script>
2.2 插值语法实现
通过直接在Vue模板里拼接来实现
<div id="root"><div class="row">姓:<input type="text" v-model="firstName"></div><div class="row">名:<input type="text" v-model="lastName"></div><div class="row">全名:<span>{{firstName}}-{{lastName}}</span></div>
</div><script>const vm = new Vue({el:'#root',data() {return {firstName: '小',lastName: '三'};},});
</script>
三、体会计算属性的好处
3.1 复杂任务时
如下代码是反转字符串的例子,这个时候,模板变的很复杂,不容易看懂和理解。
<div id="app">{{ message.split('').reverse().join('') }}
</div>
3.2 使用计算属性
对于上述问题,我们使用计算属性来解决。
<div id="app"><p>原始字符串: {{ message }}</p><p>计算后反转字符串: {{ reversedMessage }}</p>
</div><script>
var vm = new Vue({el: '#app',data: {message: 'Runoob!'},computed: {// 计算属性的 getterreversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')}}
})
</script>
3.3 computed vs methods
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。
methods: {reversedMessage2: function () {return this.message.split('').reverse().join('')}
}
四、计算属性汇总
- 概念:所谓
计算属性,就是要用的属性不存在,要通过已有的属性加工、计算生成一个全新的属性。对于Vue来说,data中配置的就是属性。计算属性与data中定义的属性分开。 - 原理:底层借助了
Object.defineProperty()方法提供的getter和setter。 get函数的作用
a. 当有程序读取计算属性时,get就会被调用,且返回值就作为计算属性的值。即计算属性是实时计算的属性。
b.Vue做了缓存,当所依赖的数据没有发生变化,读取的时候会从缓存中取值。不会调用get
c.Vue已经将get中this维护好了,就是vm实例get函数什么时候执行?
a. 初次读取时会执行一次
b. 当依赖的数据发生变化时,会被再次调用set函数什么时候调用?
a. 当计算属性被修改时被调用- 优势:与
methods实现相比,内部有缓存机制,效率更高,调试方便。 - 注意点
a.计算属性最终会出现在vm上,直接读取使用即可。
b. 如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
c.计算属性一般不做修改。这个时候,只读不改可以有简写的形式,不再是一个对象了,而是用函数代替且就为get函数。
相关文章:
第4集丨Vue 江湖 —— 计算属性
目录 一、基本使用1.1 在computed中定义1.1.1 案例1.1.2 控制台调用getter1.1.3 控制台中的data和computed 1.2 缓存效果1.3 完整写法1.3.1 案例1.3.2 效果图 1.4 简写形式 二、案例的其他实现2.1 methods实现2.2 插值语法实现 三、体会计算属性的好处3.1 复杂任务时3.2 使用计…...
Docker 容器化学习
文章目录 前言Docker架构 1、 docker安装2、启动docker服务3、设置docker随机器一起启动4、docker体验5、docker常规命令5.1、容器操作docker [run|start|stop|restart|kill|rm|pause|unpause]docker [ps|inspect|exec|logs|export|import] 5.2、镜像操作docker images|rmi|tag…...
springboot第34集:ES 搜索,nginx
#用search after解决深分页性能问题 #第一页 GET /bank/_search {"size": 10,"sort": [{"account_number": {"order": "asc"}}] }#第二页 GET /bank/_search {"size": 10,"sort": [{"account_numb…...
微信小程序中的分包使用介绍
一、分包的好处 可以优化小程序首次启动的下载时间 在多团队共同开发时可以更好的解耦协作 主包:放置默认启动页面/TabBar 页面,公共资源/JS 脚本 分包:根据开发者的配置进行划分 限制:所有分包大小不超过 20M,单…...
【云原生】K8S二进制搭建二:部署CNI网络组件
目录 一、K8S提供三大接口1.1容器运行时接口CRI1.2云原生网络接口CNI1.3云原生存储接口CSI 二、Flannel网络插件2.1K8S中Pod网络通信2.2Overlay Network2.3VXLAN2.4Flannel 三、Flannel udp 模式的工作原理3.1ETCD 之 Flannel 提供说明 四、vxlan 模式4.1Flannel vxlan 模式的工…...
【iOS】—— 离屏渲染
文章目录 离屏渲染UIView和CALayer关系GPU屏幕渲染有两种方式:产生离屏渲染的原因:既然离屏渲染这么耗性能,为什么有这套机制呢?什么情况会离屏渲染?既然离屏渲染这么不好,为什么我们还要强制开启呢?如何避免离屏渲染?…...
基于人工智能的中医图像分类系统设计与实现
华佗AI 《支持中医,永远传承古老文化》 本存储库包含一个针对中药的人工智能图像分类系统。该项目的目标是通过输入图像准确识别和分类各种中草药和成分。 个人授权许可证 版权所有 2023至2050特此授予任何获得华佗AI应用程序(以下简称“软件”)副本的人免费许可,可根据以…...
spring security + oauth2 使用RedisTokenStore 以json格式存储
1.项目架构 2.自己对 TokenStore 的 redis实现 package com.enterprise.auth.config;import org.springframework.data.redis.connection.RedisConnection; import org.springframework.data.redis.connection.RedisConnectionFactory; import org.springframework.data.redis…...
css position: sticky;实现上下粘性布局,中间区域滚动
sticky主要解决的问题 1、使用absolute和fixed中间区域需要定义高度2、使用absolute和fixed底部需要写padding-bottom 避免列表被遮挡住一部分(底部是浮窗的时候,需要动态的现实隐藏) <!DOCTYPE html> <html lang"en"&…...
解密HTTP代理爬虫中的IP代理选择与管理策略
在当今数据驱动的世界中,HTTP代理爬虫作为一项重要的数据采集工具,其成功与否往往取决于IP代理的选择与管理策略。作为一家专业的HTTP代理产品供应商,我们深知IP代理在数据采集中的重要性。在本文中,我们将分享一些关于HTTP代理爬…...
pytorch入门
详细安装教程和环境配置可以看:Python深度学习:安装Anaconda、PyTorch(GPU版)库与PyCharm_哔哩哔哩_bilibili 跟学课程:B站我是土堆 pytorch中两个实用函数: dir():打开 help():说明书…...
Redis | 主从模式
Redis | 主从模式 1. 简介 Redis主从模式(Replication)是Redis提供的一种数据备份和高可用性解决方案。通过主从复制,可以将一个Redis服务器的数据复制到其他多个从服务器,从而实现数据的备份和读写分离,提高系统的性…...
C# Blazor 学习笔记(8):row/col布局开发
文章目录 前言相关文章代码row和col组件B_rowB_col结构 使用 前言 可能是我用的element ui和 uView这种第三方组件用的太多了。我上来就希望能使用这些组件。但是目前Blazor目前的生态其实并不完善,所以很多组件要我们自己写。 我们对组件的要求是 我们在组件化一共…...
金融供应链智能合约 -- 智能合约实例
前提 Ownable:监管者合约,有一个函数能转让监管者。 SupplyChainFin:供应链金融合约,银行、公司信息上链,公司和银行之间的转账。 发票:记录者交易双方和交易金额等的一种记录数据。如:我在超市买了一瓶水,超市给我开了一张发票。 Ownable // SPDX-…...
论文《Contrastive Meta Learning with Behavior Multiplicity for Recommendation》阅读
论文《Contrastive Meta Learning with Behavior Multiplicity for Recommendation》阅读 论文概况论文主要贡献Background & Motivation方法论单行为图神经网络(Behavior-aware GNN)多行为对比学习元对比编码模型训练 实验部分论文总结 论文概况 今…...
K8S 部署 RocketMQ
文章目录 添加模板部署本地访问 集群使用 kubesphere 作为工具 添加模板 添加 helm 模板 helm repo add rocketmq-repo https://helm-charts.itboon.top/rocketmq helm repo update rocketmq-repo编写 value.yaml 文件 配置主从节点的个数,例子为单节点 broker:…...
[Docker]入门之docker-compose
一,Docker-compose简介 1,Docker-compose简介 Docker-Compose项目是Docker官方的开源项目,负责实现对Docker容器集群的快速编排。 Docker-Compose将所管理的容器分为三层,分别是工程(project),…...
SAP ABAP中使用函数ALSM_EXCEL_TO_INTERNAL_TABLE读取EXCEL中不同的SHEET数据
SAP提供了标准的读取EXCEL的函数(ALSM_EXCEL_TO_INTERNAL_TABLE),但是此标准函数无法满足对同一EXCEL 进行不同SHEET的数据读取,一下方法就是教你如何通过修改程序来实现ALSM_EXCEL_TO_INTERNAL_TABLE读取多个SHEET; …...
Rust 编程小技巧摘选(6)
目录 Rust 编程小技巧(6) 1. 打印字符串 2. 重复打印字串 3. 自定义函数 4. 遍历动态数组 5. 遍历二维数组 6. 同时遍历索引和值 7. 迭代器方法的区别 8. for_each() 用法 9. 分离奇数和偶数 10. 判断素数(质数) Rust 编程小技巧(6) 1. 打印…...
如何保证Redis缓存和数据库的一致性问题
熟练掌握Redis缓存技术? 那么请问Redis缓存中有几种读写策略,又是如何保证与数据库的一致性问题 今天来聊一聊常用的三种缓存读写策略 Cache Aside Pattern Cache Aside Pattern 是我们平时使用比较多的一个缓存读写模式,比较适合读请求比…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代,情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现,消费者对内容的“有感”程度,正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲
文章目录 前言第一部分:体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分:体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
C++实现分布式网络通信框架RPC(2)——rpc发布端
有了上篇文章的项目的基本知识的了解,现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...
数据库——redis
一、Redis 介绍 1. 概述 Redis(Remote Dictionary Server)是一个开源的、高性能的内存键值数据库系统,具有以下核心特点: 内存存储架构:数据主要存储在内存中,提供微秒级的读写响应 多数据结构支持&…...
VSCode 使用CMake 构建 Qt 5 窗口程序
首先,目录结构如下图: 运行效果: cmake -B build cmake --build build 运行: windeployqt.exe F:\testQt5\build\Debug\app.exe main.cpp #include "mainwindow.h"#include <QAppli...
基于小程序老人监护管理系统源码数据库文档
摘 要 近年来,随着我国人口老龄化问题日益严重,独居和居住养老机构的的老年人数量越来越多。而随着老年人数量的逐步增长,随之而来的是日益突出的老年人问题,尤其是老年人的健康问题,尤其是老年人产生健康问题后&…...
Springboot多数据源配置实践
Springboot多数据源配置实践 基本配置文件数据库配置Mapper包Model包Service包中业务代码Mapper XML文件在某些复杂的业务场景中,我们可能需要使用多个数据库来存储和管理不同类型的数据,而不是仅仅依赖于单一数据库。本技术文档将详细介绍如何在 Spring Boot 项目中进行多数…...
夏普比率(Sharpe ratio)
具有投资常识的人都明白,投资光看收益是不够的,还要看承受的风险,也就是收益风险比。 夏普比率描述的正是这个概念,即每承受一单位的总风险,会产生多少超额的报酬。 用数学公式描述就是: 其中࿱…...
Linux 进程管理学习指南:架构、计划与关键问题全解
Linux 进程管理学习指南:架构、计划与关键问题全解 本文面向初学者,旨在帮助你从架构视角理解 Linux 进程管理子系统,构建系统化学习路径,并通过结构化笔记方法与典型问题总结,夯实基础、明确方向,逐步掌握…...
