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

Vue3 shallowRef 和 shallowReactive

一、shallowRef

使用shallowRef之前需要进行引入:

import { shallowRef } from 'vue';

使用方法和ref 的使用方法一致,以下是二者的区别: 

1. 如果ref 和 shallowRef 都传入的是普通数据类型的数据,那么他们的效果是一样的,数据都能实现响应式。

2. 如果ref 和 shallowRef 传入的是对象数据类型的数据,那么ref 中的数据能够实现响应式,而shallowRef 中的数据无法实现响应。

因为很简单,如果ref中传入的是对象数据类型的数据,那么就会调用reactive 形成拥有对象响应式的Proxy 对象。

而shallowRef 并不会调用reactive,只是一般的数据。

 

二、shallowReactive

使用shallowReactive之前需要进行引入:

import { shallowReactive } from 'vue';

使用方法和ref 的使用方法一致,以下是二者的区别: 

shallowReactive 没有深度监视,而ref 自带深度监视。

也就是说在下面的代码中,person 和shallowPerson 中的name属性都能有响应式,而person.job.type 拥有响应式,shallowPerson.job.type 没有响应式。

setup() {let person = reactive({name: "张三",job: {type: "前端",},});let shallowPerson = shallowReactive({name: "张三",job: {type: "前端",},});return {person,shallowPerson,};
},

相关文章:

  • 机器学习笔记 - 了解常见开源文本识别数据集以及了解如何创建用于文本识别的合成数据
  • 使用Flink处理Kafka中的数据_题库子任务_Java语言实现
  • 【React】React 基础
  • uniapp如何上传文件,使用API是什么
  • 2023.11.18 - hadoop之zookeeper分布式协调服务
  • Flutter最新稳定版3.16 新特性介绍
  • 基于springboot实现智能热度分析和自媒体推送平台系统项目【项目源码】
  • 基于FPGA的五子棋(论文+源码)
  • hypermesh学习总结(一)
  • 邀请报名|11月24日阿里云原生 Serverless 技术实践营 深圳站
  • 控制您的音乐、视频等媒体内容
  • 【算法】二分查找-20231120
  • Java学习笔记43——函数式接口
  • rocketmq 安装dashboard1.0.0 mq消息控制台安装 rocketmq控制台安装 rocketmq-dashboard-1.0.0编译安装
  • 读书笔记:Effective C++ 3.0版2005年Scott Meyers : 55条建议(47-55)
  • [js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示
  • 5、React组件事件详解
  • Android Studio:GIT提交项目到远程仓库
  • Apache Spark Streaming 使用实例
  • bearychat的java client
  • Docker下部署自己的LNMP工作环境
  • ES6核心特性
  • java2019面试题北京
  • java第三方包学习之lombok
  • MD5加密原理解析及OC版原理实现
  • python 学习笔记 - Queue Pipes,进程间通讯
  • Python语法速览与机器学习开发环境搭建
  • redis学习笔记(三):列表、集合、有序集合
  • Vim Clutch | 面向脚踏板编程……
  • 从0搭建SpringBoot的HelloWorld -- Java版本
  • 等保2.0 | 几维安全发布等保检测、等保加固专版 加速企业等保合规
  • 分享自己折腾多时的一套 vue 组件 --we-vue
  • 紧急通知:《观止-微软》请在经管柜购买!
  • 聊聊hikari连接池的leakDetectionThreshold
  • 软件开发学习的5大技巧,你知道吗?
  • 我的面试准备过程--容器(更新中)
  • 一道闭包题引发的思考
  • 再谈express与koa的对比
  • 《天龙八部3D》Unity技术方案揭秘
  • ![CDATA[ ]] 是什么东东
  • #DBA杂记1
  • #pragma预处理命令
  • #我与Java虚拟机的故事#连载13:有这本书就够了
  • $.each()与$(selector).each()
  • (七)c52学习之旅-中断
  • (三分钟)速览传统边缘检测算子
  • (转)ORM
  • (转载)利用webkit抓取动态网页和链接
  • (轉貼) 蒼井そら挑戰筋肉擂台 (Misc)
  • ***微信公众号支付+微信H5支付+微信扫码支付+小程序支付+APP微信支付解决方案总结...
  • .net core 客户端缓存、服务器端响应缓存、服务器内存缓存
  • .NET Core日志内容详解,详解不同日志级别的区别和有关日志记录的实用工具和第三方库详解与示例
  • .net MySql
  • .NET 中的轻量级线程安全
  • .Net调用Java编写的WebServices返回值为Null的解决方法(SoapUI工具测试有返回值)