Vue3的计算属性(computed)和监听器(watch)案例语法

一:前言

        Vue3 是 Vue2 的一个升级版,随着 2023年12月31日起 Vue2 停止维护。这意味着 Vue3 将会为未来国内一段时间里,前端的开发主流。因此熟练的掌握好 Vue3 是前端开发程序员所不可避免的一门技术栈。而 Vue3 是 Vue2 的一个升级版,其语法大多相似。不过也有不同之处。比如计算属性(computed)和监听器(watch)的写法就有所不同。接下来我会通过一个案例,来描述在 Vue3 中的写法。

二:案例代码

1、html 部分

        这里是 html 的代码部分,由于只是基础案例,因此界面布局是没有那么复杂的,只是一些输入框这些显示罢了。显示效果见最上方的图片。

<template><div class="el"><h1>计算属性和监视</h1></div><fieldset><legend>姓名操作</legend>姓氏:<input placeholder="请输入姓氏" type="text" v-model="user.firstName"/><br />名字:<input placeholder="请输入名字" type="text" v-model="user.lastName"/><br /></fieldset><fieldset><legend>计算属性和监视的演示</legend>姓名:<input placeholder="显示姓名" type="text" v-model="fullName1"/><br />姓名:<input placeholder="显示姓名" type="text" v-model="fullName2"/><br />姓名:<input placeholder="显示姓名" type="text" v-model="fullName3"/><br /></fieldset>
</template>

2、JavaScript 部分

        这块是我们实现的逻辑了。这里我写的还是最初的 Vue3 版本,并不是 3.2 之后的写法,我们可以看到 computed 中的 get 和 set 写法。以及两种 watch 监听器方法。


import { computed, defineComponent, reactive, ref, watch, watchEffect } from 'vue';export default defineComponent({setup() {// 定义响应式对象const user = reactive({firstName: '东方',lastName: '不败',})// 当只有一个回调函数的时候,默认是getconst fullName1 = computed(()=>{return user.firstName + '_' + user.lastName})// computed同步修改const fullName2 = computed({get(){return user.firstName + '_' + user.lastName},set(val:string){const names = val.split('_')user.firstName = names[0]user.lastName = names[1]}})// 监听器const fullName3 = ref('')watch(user,({firstName,lastName})=>{fullName3.value = firstName + '_' + lastName},{immediate:true,deep:true})// 第二种监听器,和上面的泣别就是默认immediate和deep为truewatchEffect(()=>{fullName3.value = user.firstName + '_' + user.lastName})return {user,fullName1,fullName2,fullName3}}
})

3、css部分

<style lang="scss" scoped>
fieldset{padding: 10px;
}
</style>

三:结尾

        有 Vue2 基础的小伙伴对这块写法应该很容易理解。初学者可以自己动手写一下。最后附上项目gitee源码地址:

乾辰/vue3全家桶练习icon-default.png?t=N7T8https://gitee.com/qianchen12138/vue3-family-bucket-practice

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

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

相关文章

【阿里云】图像识别 智能分类识别 增加垃圾桶开关盖功能点和OLED显示功能点(二)

一、增加垃圾桶开关盖功能 环境准备 二、PWM 频率的公式 三、pthread_detach分离线程&#xff0c;使其在退出时能够自动释放资源 四、具体代码实现 图像识别数据及调试信息wget-log打印日志文件 五、增加OLED显示功能 六、功能点实现语音交互视频 一、增加垃圾桶开关盖功能…

90后的杀马特

《90后的杀马特》 作家&#xff0f;罗光记 破晓的光影洒落&#xff0c;九零年代的沙尘中&#xff0c; 杀马特横空出世&#xff0c;繁华的梦境中。 红发如火&#xff0c;霓虹闪烁&#xff0c;他们舞动在街头巷尾&#xff0c; 披星戴月&#xff0c;挥洒青春&#xff0c;那是属…

Mysql中横表与纵表详细解析及应用举例,看完就会用!

横、纵表 定义 横表定义&#xff1a;一个对象的所有属性在一行&#xff0c;列的定义是对象的各个字段 举例&#xff1a;学生成绩表 姓名 Java C语言 ​ 张三 100 88 纵表定义&#xff1a;一个对象的所有属性被分配到多行&#xff0c;列的定义是对象的字段和字段的值 举例…

Flutter之Graphic图表的简单示例

简介 Graphic是一个数据可视化语法和Flutter图表库。 官方github示例 我的gitee示例 网上可用资源很少&#xff0c;只有作者的几篇文章&#xff0c;并且没有特别详细的文档&#xff0c;使用的话还是需要一定的时间去调研&#xff0c;在此简单记录。 示例 以折线图为例&…

分布式定时任务系列6:XXL-job触发日志过大引发的CPU告警

传送门 分布式定时任务系列1&#xff1a;XXL-job安装 分布式定时任务系列2&#xff1a;XXL-job使用 分布式定时任务系列3&#xff1a;任务执行引擎设计 分布式定时任务系列4&#xff1a;任务执行引擎设计续 分布式定时任务系列5&#xff1a;XXL-job中blockingQueue的应用 …

我在electron中集成了自己的ai大模型

同学们可以私信我加入学习群&#xff01; 正文开始 前言一、大模型选择二、获取key三、调用api四、调用ai模型api时&#xff0c;解决跨域总结 前言 最近单位把gpt、文心一言、通义千问、星火等等等等你能想到的ai大模型都给禁掉了&#xff0c;简直丧心病狂。 不知道有多少感同…

Kafka配置SASL认证密码登录

​​​​​​1、修改config/server.properties&#xff0c;添加如下内容 listenersSASL_PLAINTEXT://内网ip:9092 advertised.listenersSASL_PLAINTEXT://外网ip:9092 security.inter.broker.protocolSASL_PLAINTEXT sasl.mechanism.inter.broker.protocolPLAIN sasl.enabled.…

青云科技容器平台与星辰天合存储产品完成兼容性互认证

近日&#xff0c; 北京青云科技股份有限公司&#xff08;以下简称&#xff1a;青云科技&#xff09;的 KubeSphere 企业版容器平台成功完成了与 XSKY星辰天合的企业级分布式统一数据平台 V6&#xff08;简称&#xff1a;XEDP&#xff09;以及天合翔宇分布式存储系统 V6&#xf…

Golang并发模型:Goroutine 与 Channel 初探

文章目录 goroutinegoexit() channel缓冲closerangeselect goroutine goroutine 是 Go 语言中的一种轻量级线程&#xff08;lightweight thread&#xff09;&#xff0c;由 Go 运行时环境管理。与传统的线程相比&#xff0c;goroutine 的创建和销毁的开销很小&#xff0c;可以…

ITSS信息技术标准——探索信息技术服务运行维护资质查询及其意义

开篇&#xff1a;随着信息技术的高速发展&#xff0c;企业对信息化设施的依赖程度日益加深&#xff0c;如何确保这些设施的正常运行&#xff0c;提高信息技术服务的质量&#xff0c;成为企业关注的焦点。于是&#xff0c;信息技术服务标准&#xff08;ITSS&#xff09;应运而生…

Android : 启动模式_简单应用

在 AndroidManifest.xml 文件中更改 android:launchMode" " standard、singleTask、singleTop、singleInstance、singleInstancePerTask standard 启动模式: 默认模式 android:launchMode"standard" a—>b ab; 跳转几个界面就要 点击 返回几次 才…

1457. 二叉树中的伪回文路径 --力扣 --JAVA

题目 给你一棵二叉树&#xff0c;每个节点的值为 1 到 9 。我们称二叉树中的一条路径是 「伪回文」的&#xff0c;当它满足&#xff1a;路径经过的所有节点值的排列中&#xff0c;存在一个回文序列。 请你返回从根到叶子节点的所有路径中 伪回文 路径的数目。 解题思路 首先确…

部署系列六基于nndeploy的深度学习 图像降噪unet部署

文章目录 1.直接在源代码demo中修改2. 如何修改呢&#xff1f;3. 修改 graph4. 总结 https://github.com/DeployAI/nndeploy https://nndeploy-zh.readthedocs.io/zh/latest/introduction/index.html 通过以上2个官方链接对nndeploy基本的使用方法应该有所了解了。 下面就是利用…

uniapp链接WebSocket 常用的api

UniApp是一个基于Vue语法的跨平台应用开发框架&#xff0c;它支持使用WebSocket来实现实时双向通信。WebSocket是一种在单个TCP连接上进行全双工通信的协议&#xff0c;它可以在客户端和服务器之间建立持久性的连接&#xff0c;并允许双向通信。在UniApp中&#xff0c;你可以使…

自动语音识别 支持86种语言 Dragon Professional 16 Crack

从个体从业者到全球组织&#xff0c;文档密集型行业的专业人士长期以来一直依靠 Dragon 语音识别来更快、更高效地创建高质量文档&#xff0c;减少管理开销&#xff0c;以便他们能够专注于客户。了解 Dragon Professional v16 如何通过单一解决方案提高标准&#xff0c;为各个业…

ArcGis如何用点连线?

这里指的是根据已有坐标点手动连线&#xff0c;类似于mapgis中的“用点连线”&#xff0c;线的每个拐点是可以自动捕捉到坐标点的&#xff0c;比直接画精确。 我也相信这么强大的软件一定可以实现类似于比我的软件上坐标时自动生成的线&#xff0c;但是目前我还没接触到那里&a…

基于IDEA+SpringBoot+微服务开发的P2P平台项目

基于springboot的社区养老医疗综合服务平台 项目介绍&#x1f481;&#x1f3fb; 项目名称&#xff1a;基于P2P的金融项目 一个基于P2P&#xff08;点对点&#xff09;模式的金融服务平台&#xff0c;致力于提供透明、高效、安全的金融服务。我们的目标是连接借款人与投资者&am…

Clion在Windows下build时出现undefined reference,即使cmake已经正确链接第三方库(如protobuf)?

你是否正在使用clion自带的vcpkg来安装了protobuf&#xff1f; 或者你是否自己使用visual studio自己编译了libprotobuf.lib&#xff1f; 你是否已经正确在CmakeLists.txt中添加了以下命令&#xff1a; find_package(Protobuf CONFIG REQUIRED) include_directories(${Protobu…

inBuilder低代码平台新特性推荐-第十期

各位知乎的友友们&#xff0c;大家好~ 今天来给大家带来的是inBuilder低代码平台特性推荐系列第十期——查看变更日志 场景介绍 【销售订单列表】中添加查看变更日志按钮&#xff0c;可以查看列表当前行数据的历史变更记录。 运行时效果 概念 系统中有些关键业务关键数据&am…

【极客技术】真假GPT-4?微调 Llama 2 以替代 GPT-3.5/4 已然可行!

近日小编在使用最新版GPT-4-Turbo模型&#xff08;主要特点是支持128k输入和知识库截止日期是2023年4月&#xff09;时&#xff0c;发现不同商家提供的模型回复出现不一致的情况&#xff0c;尤其是模型均承认自己知识库达到2023年4月&#xff0c;但当我们细问时&#xff0c;Fak…