当前位置: 首页 > news >正文

春招冲刺(九):计算属性和监视属性总结

计算属性和监视属性总结

Q1:计算属性

姓:<input type="text" v-model="firstName"><br><br>
名:<input type="text" v-model="lastName"><br><br>
姓名:<span>{{fullName}}</span>
//写法1:完整版
computed:{fullName:{get(){return this.firstName + '-' + this.lastName},set(value){const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}}
}
//写法2:函数版(简写)
computed:{fullName(){return this.firstName + '-' + this.lastName}}

总结:

  • 定义:要用的属性不存在,需要通过已有属性计算得来。
  • 原理:底层借助了Objcet.defineproperty()方法提供的getter和setter。
  • get函数什么时候执行?
    • 初次读取时会执行一次
    • 当依赖的数据发生改变时会被再次调用
  • 优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便
  • 备注:
    • 计算属性最终会出现在vm上,直接读取使用即可
    • 如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变
    • 如果计算属性确定不考虑修改,可以使用计算属性的简写形式

Q2:监视属性

<h2>今天天气好{{info}}!</h2>
<button @click="changeWeather">点击切换天气</button>
// 写法1:
new Vue({el:'#root', data:{ isHot:true,},// 根据isHot的bool值决定显示什么文字computed:{info(){return this.isHot ? '炎热' : '凉爽' }},// 按钮点击改变isHot的值methods:{changeWeather(){this.isHot = !this.isHot}},// 监视isHot的值,要是改变了就输出watch:{isHot:{immediate:true, //初始化时让handler调用一下//handler什么时候调用?当isHot发生改变时handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}}}})

总结:

  • 当被监视的属性变化时,回调函数自动调用,进行相关操作
  • 监视的属性必须存在,才能进行监视
  • 监视有两种写法:
  • 创建Vue时传入watch配置

通过vm.$watch监视

// 写法2:
vm.$watch('isHot',{immediate:true,handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}
})
// 写法3:简写。如果监视属性除了handler没有其他配置项的话,可以进行简写。
isHot(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue,this)
}

深度监视

<h3>a的值是:{{numbers.a}}</h3>
<button @click="numbers.a++">点我让a+1</button>
<h3>b的值是:{{numbers.b}}</h3>
<button @click="numbers.b++">点我让b+1</button>
new Vue({el:'#root', data:{ isHot:true,numbers:{a:1,b:1,}},watch:{//监视多级结构中所有属性的变化numbers:{deep:true,handler(){console.log('numbers改变了')}},//监视多级结构中某个属性的变化'numbers.a':{handler(){console.log('a被改变了')}} }})

总结:

  • Vue中的watch默认不监测对象内部值的改变(一层)
  • 在watch中配置deep:true可以监测对象内部值的改变(多层)

Q3:computed和watch的不同

  • 功能上:computed是计算属性,watch是监听一个值的变化,然后执行对应的回调。
  • 是否调用缓存:computed中的函数所依赖的属性没有发生变化,那么调用当前的函数的时候会从缓存中读取,而watch在每次监听的值发生变化的时候都会执行回调。
  • 是否调用return:computed中的函数必须要用return返回,watch中的函数不是必须要用return。
  • computed默认第一次加载的时候就开始监听;watch默认第一次加载不做监听,如果需要第一次加载做监听,添加immediate属性,设置为true(immediate:true)
    https://blog.csdn.net/web22050702/article/details/125530363

Q4:运用场景

  • 当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算;
  • 当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

参考链接

  • https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649091937&idx=1&sn=1d08ebe716e00555e18aa34896ffa7a7&chksm=be5bc8cc892c41daaefa76d5747d5e1eccd2934c3c178e70e16702d729aa2e40409621ffa137&scene=27

相关文章:

春招冲刺(九):计算属性和监视属性总结

计算属性和监视属性总结 Q1&#xff1a;计算属性 姓&#xff1a;<input type"text" v-model"firstName"><br><br> 名&#xff1a;<input type"text" v-model"lastName"><br><br> 姓名&#xff…...

数据挖掘(作业1)

实验开始前先配置环境 以实验室2023安装的版本为例&#xff1a; 1、安装anaconda&#xff1a;&#xff08;anaconda自带Python,安装了anaconda就不用再安装Python了&#xff09; 下载并安装 Anaconda3-2022.10-Windows-x86_64.exe 自己选择安装路径&#xff0c;其他使用默认…...

【UE4 RTS游戏】01-项目准备

步骤新建一个工程&#xff0c;选择俯视角游戏模板我命名工程如下&#xff1a;删除场景内的所有cube再删除Floor和Wall删除TopDownCharacter删除“NavgationMeshBoundVolume”删除“TamplateLabel”和“RecastNavMesh-Default”删除LightmassImportanceVolume、PostProcessVolum…...

登录系统账号检测--课后程序(Python程序开发案例教程-黑马程序员编著-第3章-课后作业)

实例8&#xff1a;登录系统账号检测 登录系统一般具有账号密码检测功能&#xff0c;即检测用户输入的账号密码是否正确。若用户输入的账号或密码不正确&#xff0c;提示 “用户名或密码错误”和“您还有*次机会”&#xff1b; 若用户输入的账号和密码正确&#xff0c;提示“登…...

CentOS8基础篇12:使用RPM管理telnet-server软件包

一、RPM包管理工具简介 RedHat软件包管理工具(RedHat Package Manager&#xff0c;RPM) RPM软件包工具常用于软件包的安装、查询、更新升级、校验、卸载以及生成.rpm格式的软件包等操作。 RPM软件包工具只能管理后缀是.rpm的软件包。软件包的命名格式&#xff1a; 软件名称…...

IT女神文章记录之自己

匆匆时光&#xff0c;一转眼自己已经从一个学生转变成一个职场工作者了刚出校园的时候&#xff0c;对职场充满了憧憬&#xff0c;觉得自己可以大展身手然后其实在我毕业后2年内&#xff0c;踏入码农阶段的时候&#xff0c;是一段非常压抑的工作&#xff0c;不知道谁能体会到那种…...

Compose 动画 (四) : AnimatedVisibility 各种入场和出场动画效果

AnimatedVisibility中的EnterTransition 和 ExitTransition &#xff0c;用来配置入场/出场时候的动画效果。 默认的入场效果是 fadeIn() expandVertically() 默认的出场效果是 fadeOut() shrinkVertically() 1. EnterTransition和ExitTransition支持的动画 enter的参数类…...

notepad++学习小技巧

不要小瞧了notepadd 这个可是我们的cv好帮手。。。 实战1背景&#xff0c;我找一个同事要表结构 结果他给我了一个xml。顿时一懵&#xff0c;我也不知道为啥好像是从前端扣下来的。 建表我只需要 columnName, displayName当作是comment&#xff0c; dataTypeNamecolumnType借鉴…...

Android supports-screens 屏幕适配

基本概念 supports-screens用于设置屏幕相关&#xff0c;处于Manifest的子标签中。 使您能够指定应用支持的屏幕尺寸&#xff0c;并为比应用支持的最大屏幕还大的屏幕启用屏幕兼容性模式。请务必始终在应用中使用此元素指定应用支持的屏幕尺寸。 注意&#xff1a;建议不要在屏…...

操作系统基础知识介绍之Mixed CriticalitySystems——混合关键系统

一、发展背景 在嵌入式场景中&#xff0c;虽然Linux已经得到了广泛应用&#xff0c;但并不能覆盖所有需求&#xff0c;例如高实时、高可靠、高安全的场合。这些场合往往是实时操作系统 的用武之地。有些应用场景既需要Linux的管理能力、丰富的生态又需要实时操作系统的高实时、…...

【数据结构初阶】详解链表OJ题

目录一.删除链表中等于给定值的节点二.合并有序链表并返回三.链表的回文结构1.反转单链表2.返回非空链表的中间节点四.输出链表倒数第K个节点五.基于给定值x分割单链表六.返回两个链表的第一个中间节点一.删除链表中等于给定值的节点 我们先来看第一题(题目链接): 因为我们需…...

Java基本数据类型变量自动提升、强制类型转换、String基本类型使用

文章目录基本数据类型变量自动提升特殊情况强制类型转换String基本类型使用基本数据类型变量自动提升 规则&#xff1a; 将取值范围小&#xff08;或容量小&#xff09;的类型自动提升为取值范围大&#xff08;或容量大&#xff09;的类型 。 byte、short、char-->int-->…...

Redis锁与幂等性不得不说的故事

前言&#xff1a; 相信很多小伙伴对缓存锁都不陌生&#xff0c;但是简单的缓存锁想要用好还是需要一些功力。本文总结了笔者多年使用缓存所的一些心得&#xff0c;欢迎交流探讨~ 幂等模型&#xff1a; 幂等场景一般由查重写入两步操作组成&#xff0c;两步操作组成一个最小完…...

Spark 应用调优

Spark 应用调优人数统计优化摇号次数分布优化Shuffle 常规优化数据分区合并加 Cache优化中签率的变化趋势中签率局部洞察优化倍率分析优化表信息 : apply : 申请者 : 事实表lucky : 中签者表 : 维度表两张表的 Schema ( batchNum&#xff0c;carNum ) : ( 摇号批次&#xff0c…...

synchronized 与 volatile 关键字

目录1.前言1.synchronized 关键字1. 互斥2.保证内存可见性3.可重入2. volatile 关键字1.保证内存可见性2.无法保证原子性3.synchronized 与 volatile 的区别1.前言 synchronized关键字和volatile是大家在Java多线程学习时接触的两个关键字&#xff0c;很多同学可能学习完就忘记…...

【0成本搭建个人博客】——Hexo+Node.js+Gitee Pages

目录 1、下载安装Git 2、下载安装Node.js 3、使用Hexo进行博客的搭建 4、更改博客样式 5、将博客上传到Gitee 6、更新博客 首先看一下Hexo的博客的效果。 1、下载安装Git Git 是一个开源的分布式版本控制系统&#xff0c;可以有效、高速地处理从很小到非常大的项目版本…...

【面试实战】认证授权流程及原理分析

认证授权流程及原理分析 1、认证 (Authentication) 和授权 (Authorization)的区别是什么?2、什么是Cookie ? Cookie的作用是什么?如何在服务端使用 Cookie ?3、Cookie 和 Session 有什么区别?如何使用Session进行身份验证?1、认证 (Authentication) 和授权 (Authorizatio…...

TPM命令解析之tpm2_startauthsession

参考网址链接&#xff1a;tpm2-tools/tpm2_startauthsession.1.md at master tpm2-software/tpm2-tools GitHub 命令名称 tpm2_startauthsession 功能 启动一个TPM会话。 命令形式 tpm2_startauthsession [OPTIONS] 描述 启动一个TPM会话。默认是启动一个试验&#xff08…...

第14章 局部波动率模型

这学期会时不时更新一下伊曼纽尔德曼&#xff08;Emanuel Derman&#xff09; 教授与迈克尔B.米勒&#xff08;Michael B. Miller&#xff09;的《The Volatility Smile》这本书&#xff0c;本意是协助导师课程需要&#xff0c;发在这里有意的朋友们可以学习一下&#xff0c;思…...

云原生周刊:开源“赢了”,但它可持续吗?

日前召开的 State of Open 会议上&#xff0c;开源“赢了”&#xff0c;但如果政府和企业不站出来确保生态系统在未来的弹性和可持续性&#xff0c;那么它仍然会失败。 OpenUK 首席执行官 Amanda Brock 在开幕式上表示&#xff0c;数字化和开源在过去 5 到 10 年的进步提升了工…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

PHP 8.5 即将发布:管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

c++第七天 继承与派生2

这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分&#xff1a;派生类构造函数与析构函数 当创建一个派生类对象时&#xff0c;基类成员是如何初始化的&#xff1f; 1.当派生类对象创建的时候&#xff0c;基类成员的初始化顺序 …...

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...

鸿蒙(HarmonyOS5)实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...

基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究

摘要&#xff1a;在消费市场竞争日益激烈的当下&#xff0c;传统体验营销方式存在诸多局限。本文聚焦开源AI智能名片链动2 1模式S2B2C商城小程序&#xff0c;探讨其在沉浸式体验营销中的应用。通过对比传统品鉴、工厂参观等初级体验方式&#xff0c;分析沉浸式体验的优势与价值…...