vue3 ref 与shallowRef reactive与shallowReactive

news2024/10/7 10:16:21

ref

给数据添加响应式,基本类型采用object.defineProperty进行数据劫持,对象类型是借助reactive 实现响应式,采用proxy 实现数据劫持,利用reflect进行源数据的操作

 let country = ref({
                count:20,
                names:['河南','山东','陕西'],
                objs:{
                    key:'01',
                    value:{
                        name:'张三'
                    }
                }
            })
            console.info(country)

在这里插入图片描述

shallowRef:

只给基本数据添加响应式,对于对象类型的响应式不予处理

  let country = shallowRef({
                count:20,
                names:['河南','山东','陕西'],
                objs:{
                    key:'01',
                    value:{
                        name:'张三'
                    }
                }
            })
            console.info(country)

在这里插入图片描述

shallowReactive:

只处理对象最外层属性的响应式(浅响应式)(deep:false)

reactive:

给对象添加响应式(深响应式)(deep:true)

什么时候使用?

如果有一个对象数据,结构比较深,但变化时只是外层属性变化===》shallowReactive
如果有一个对象数据,后续功能不会改对象中的属性,而是生成新的对象来替换 ===》shallowRef

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

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

相关文章

AI大模型时代,开发工程师与项目管理者面对的机遇和挑战,文末送书3本

🏆作者简介,黑夜开发者,CSDN领军人物,全栈领域优质创作者✌,CSDN博客专家,阿里云社区专家博主,2023年6月CSDN上海赛道top4。 🏆数年电商行业从业经验,历任核心研发工程师…

centos7 在线安装python3

在线安装命令 yum install -y python3 输入命令之后等待安装完成 查看版本 查看版本3 输入命令 python3 看到版本号为3.6.8 查看版本2 输入命令 python2 看到版本号为2.7.5

网络运维Day13

文章目录 部署web服务器部署虚拟机web1安装依赖包解压NGINX压缩包初始化编译编译安装查看验证配置动静分离 部署虚拟机web2安装依赖包解压NGINX压缩包初始化编译编译安装查看验证配置动静分离 配置NGINX七层代理测试健康检查功能 配置NGINX四层代理部署代理服务器 总结 部署web…

vue中cli组件如何自定义定义

目录 创建自定义组件 注册并使用自定义组件 注册组件: 在需要使用该组件的页面或父组件中注册并引入自定义组件。 使用 Props 传递数据 总结步骤: 前言 在Vue CLI中使用自定义组件是构建交互式和模块化Web应用的重要一环。Vue CLI为开发者提供了使用…

RocketMQ底层通信机制

分布式系统各个角色间的通信效率很关键,通信效率的高低直接影响系统性能,基于Socket实现一个高效的TCP通信协议是很有挑战的,本节介绍RocketMQ是如何解决这个问题的。 1.Remoting模块 RocketMQ的通信相关代码在Remoting模块里,先…

Linkage Mapper 报错

1 . 错误提示:“No module named lm_config” 错误原因:**** 2.错误提示:“Cannot find an installation of Circuitscape in your Program Files directory.” 错误原因:***** 3. 错误提示:UnicodeEncodeError: ‘asc…

Windows 微PE WePE_64_V2.3 PE模式下启用账号和修改密码

启动PE后,进入桌面打开运行dism程序 选择带有系统的盘符(默认选的是PE盘),然后打开会话 选择左侧工具箱,然后右侧找到账户管理 然后就可以对已有账号进行管理了 结束。

Java SE 封装、包、static关键字和代码块

1.封装 1.1封装的概念 面向对象程序三大特性:封装、继承、多态。而类和对象阶段,主要研究的就是封装特性。何为封装呢?简单来说 就是套壳屏蔽细节。 封装:将数据和操作数据的方法进行有机结合,隐藏对象的属性和实现细…

springboot-error

Invalid bound statement (not found): com.example.demo.mapper.UserMapper.findAll 一直报错,找不到相应的mapper文件。 排除以下原因之后,还是不对: https://blog.csdn.net/xxpxxpoo8/article/details/127548543 最后发现是因为我的mapp…

云原生实战课大纲

1. 云原生是什么 原生应用(java,pyrhon) 上云的过程应用上云遇到的问题1.微服务的拆分 微服务的访问关系应用的架构云原生适合什么样的人去学具备什么样的前提条件云原生要学习什么docker k8s devlops server mesh jks k8s监控吧自己的微服务上云另…

聊聊leetcode可包含重复数字的序列的《47. 全排列 II》中的vis标记函数

1 题目描述&#xff08;字节二面题目&#xff09; 2 代码 class Solution {List<List<Integer>>res;List<Integer>list;boolean[]used;public List<List<Integer>> permuteUnique(int[] nums) {resnew ArrayList<>();listnew ArrayList&l…

PHP中$_SERVER全局变量

在PHP中&#xff0c;$_SERVER 是一个全局数组变量&#xff0c;它包含了有关服务器和当前脚本的信息。$_SERVER 数组中的每个元素都是服务器环境的一个参数&#xff0c;如请求的方法、请求的 URI、客户端 IP 地址等。 PATH 系统环境变量的值&#xff0c;包含了多个目录的路径…

SaaS 电商设计 (三) 如何做大促压测

一.背景&目标 1.1 常见的压测场景 电商大促:一众各大厂的促销活动场景,如:淘宝率先推出的天猫双11,而后京东拉出的京东 618 .还是后续陆陆续续的一些年货节, 3.8 女神节等等.都属于一些常规的电商大促 票务抢购:常见的如承载咱们 80,90 青春回忆的 Jay 的演唱会,还有普罗…

Docker - 容器数据卷

Docker - 容器数据卷 什么是容器数据卷 等同于挂载&#xff0c;将容器内的目录地址指向于宿主机文件系统中 直接使用命令来挂载 -v docker run -it -v 主机目录:容器内目录# 测试 docker run -it -v /root:/home centos /bin/bash [rootiZ2zeg7mctvft5renx1qvbZ ~]# docker …

求最大公约数math.gcd()

【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 求最大公约数 math.gcd() [太阳]选择题 下列代码执行输出的结果是&#xff1f; import math print("【执行】print(math.gcd(6, 8))") print(math.gcd(6, 8)) print(&quo…

vue3项目 Element-Plus DatePicker日期选择器组件限制只能选择7天内

需求&#xff1a;时间选择器 只能选择7天及以内 <template><el-date-pickerv-model"valueDate"type"daterange"range-separator"⇀"start-placeholder"开始日期"end-placeholder"结束日期"format"YYYY-MM-DD&…

保姆级Decimal.js的使用(如何解决js精度问题)

精度问题控制台图样 如果银行的业务你这样做&#xff0c;不知道要损失多少钱&#xff0c;这样是不行的&#xff0c;计算的不准确是需要背锅的&#xff0c;我们给后端去做吧&#xff0c;其实我们前端也是可以做的&#xff0c;引入Decimal.js 01.引入Decimal.js decimal.js是使用…

用户日期格式不一致导致BDC报时间格式不一致问题

问题描述 在做销售开票的功能时用的BDC&#xff0c;业务在测试的时候总是报日期格式不一致的错误&#xff0c;而我自己测的时候却没啥问题&#xff0c;调试的时候发现是我和业务的时间格式不一致&#xff08;我是YYYYMMDD,他是MMDDYYYY&#xff09;。 解决方案 用函数CONVERT…

博捷芯BJCORE:国内划片机品牌优势

国内划片机品牌在半导体设备制造领域奋起直追&#xff0c;展现出以下几个优势&#xff1a; 1. 技术提升&#xff1a;国内划片机品牌在技术上持续取得突破&#xff0c;例如设备精准度和切割精度的提高&#xff0c;可以在短时间内完成大量加工&#xff0c;提高了生产效率。 2. 适…

Python 如何实现访问者设计模式?什么是访问者(Visitor)模式?实际案例中有什么作用?

什么是访问者设计模式&#xff1f;访问者&#xff08;Visitor&#xff09;设计模式介绍&#xff1a; 访问者&#xff08;Visitor&#xff09;设计模式是一种行为设计模式&#xff0c;用于在不修改被访问对象的前提下定义新的操作。它通过将操作封装到独立的访问者类中&#xf…