Vue 响应式数据的判断

isRef:检查一个值是否为一个 ref 对象。

isReactive:检查一个对象是否由 reactive 创建的响应式数据。

isReadonly:检查一个对象是否由 readonly 创建的只读数据。

isProxy:检查一个对象是否由 reactive 或者 readonly 创建的数据。

响应式数据判断的使用:

检测 ref 数据:

<template><h2>{{ sum }}</h2>
</template><script>
// 引入 isRef 函数
import { ref, isRef } from 'vue'
export default {name: "Home",setup() {let sum = ref(0);// 检查一个值是否为一个 ref 对象console.log( isRef(sum) ); // truereturn { sum }}
}
</script>

检测 reactive 数据:

<template><h2>{{ info.name }} : {{ info.age }}</h2>
</template><script>
// 引入 isReactive 函数
import { reactive, isReactive } from 'vue'
export default {name: "Home",setup() {let info = reactive({ name: "张三", age: 18 });// 检查一个对象是否由 reactive 创建的响应式数据console.log( isReactive(info) ); // truereturn { info }}
}
</script>

检测 readonly 数据:

<template><h2>{{ info.name }} : {{ info.age }}</h2>
</template><script>
// 引入 isReadonly 函数
import { readonly, isReadonly } from 'vue'
export default {name: "Home",setup() {let info = readonly({ name: "张三", age: 18 });// 检查一个对象是否由 readonly 创建的只读数据console.log( isReadonly(info) ); // truereturn { info }}
}
</script>

检测 reactive 或 readonly 数据:

<template><h2>{{ info.name }} : {{ readInfo.age }}</h2>
</template><script>
// 引入 isProxy 函数
import { reactive, readonly, isProxy } from 'vue'
export default {name: "Home",setup() {let info = reactive({ name: "张三", age: 18 });let readInfo = readonly(info);// 检查一个对象是否由 reactive 或者 readonly 创建的数据console.log( isProxy(info) ); // trueconsole.log( isProxy(readInfo) ); // truereturn { info, readInfo }}
}
</script>

原创作者:吴小糖

创作时间:2023.11.22

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

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

相关文章

单链表OJ题——10.环形链表2

10.环形链表2 142. 环形链表 II - 力扣&#xff08;LeetCode&#xff09; /* 解题思路&#xff1a; 如果链表存在环&#xff0c;则fast和slow会在环内相遇&#xff0c;定义相遇点到入口点的距离为X,定义环的长度为C,定义头到入口的距离为L,fast在slow进入环之后一圈内追上slow…

【攻防世界-misc】simple_transfer

1.下载并打开文件&#xff0c; 2.这个文件是一个pcap文件&#xff0c; 用wireshark打开&#xff0c;并按上图步骤操作&#xff0c; 会自动定位到有flag的这个信息行&#xff0c;这时需要右键追踪该信息的tcp流即可。 向下查找时&#xff0c;可以看到有一个pdf文件在这个里面&…

【Java基础】Java导Excel攻略

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

【开源】基于Vue和SpringBoot的教学过程管理系统

项目编号&#xff1a; S 054 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S054&#xff0c;文末获取源码。} 项目编号&#xff1a;S054&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 教师端2.2 学生端2.3 微信小程序端2…

8 个有效的安卓数据恢复软件——可让丢失的文件起死回生!

所有数字设备最终都会失败。安卓设备也不例外&#xff0c;无论您使用的是 Android 手机还是平板电脑。由于缺乏备份、意外删除、存储卡问题、生根错误等&#xff0c;您可能会丢失一些宝贵的数据。 如果发生这种情况&#xff0c;最好的选择之一是使用安卓数据恢复软件——这可能…

Xilinx Zynq-7000系列FPGA任意尺寸图像缩放,提供两套工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐FPGA图像处理方案FPGA图像缩放方案 3、设计思路详解HLS 图像缩放介绍 4、工程代码1&#xff1a;图像缩放 HDMI 输出PL 端 FPGA 逻辑设计PS 端 SDK 软件设计 5、工程代码2&#xff1a;图像缩放 LCD 输出PL 端 FPGA 逻辑设计PS 端 SDK 软件设…

移动端适配-(postcss-pxtorem)

基于vuevant的移动端适配(rem) 1.下载lib-flexible --save npm i lib-flexible --save2.在main.js中引入lib-flexible main.js import lib-flexible/flexible3.设置meta标签 <meta name"viewport" content"widthdevice-width, initial-scale1, maximum-s…

Java面试题08

1.jsp 和 servlet 有什么区别&#xff1f; JSP&#xff08;JavaServer Pages&#xff09;是一种在HTML中嵌入Java代码的技术&#xff0c;适合用于生成动态内容&#xff1b; Servlet是Java编写的服务器端程序&#xff0c;用于处理HTTP请求和响应。 JSP (Java Server Pages) 和 …

漏洞检测与EPSS评分

EPSS (利用预测评分系统)是为了测量特定的漏洞在野外被利用的可能性。EPSS 得分范围从0% (最低的利用概率)到100% (最高的利用概率)。此外&#xff0c;由于仅从概率得分很难推断出真正的意义&#xff0c;EPSS 还提供百分位排名; 百分位排名衡量 EPSS 概率相对于所有其他 EPSS 得…

Qt无边框设计

//指定窗口为无边框 this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint);重写鼠标事件&#xff1a; void mousePressEvent(QMouseEvent* event) override;

Python算法——树的路径和算法

Python算法——树的路径和算法 树的路径和算法是一种在树结构中寻找从根节点到叶节点的所有路径&#xff0c;其路径上的节点值之和等于给定目标值的算法。这种算法可以用Python语言实现&#xff0c;本文将介绍如何使用Python编写树的路径和算法&#xff0c;并给出一些示例代码…

事关Django的静态资源目录设置与静态资源文件引用(Django的setting.py中的三句静态资源(static)目录设置语句分别是什么作用?)

在Django的setting.py中常见的三句静态资源(static)目录设置语句如下&#xff1a; STATICFILES_DIRS [os.path.join(BASE_DIR, static_list)] # 注意这是一个列表,即可以有多个目录的路径 STATIC_ROOT os.path.join(BASE_DIR, static_root) STATIC_URL /static-url/本文介…

vue前端项目如何配置后端项目的请求地址

在 Vue 前端项目中配置后端项目的访问地址可以通过修改项目的配置文件来实现。Vue 常用的配置文件是 vue.config.js&#xff0c;你可以按照以下步骤进行配置&#xff1a; 在 Vue 项目的根目录下&#xff0c;创建或编辑 vue.config.js 文件。 在 vue.config.js 中&#xff0c;可…

PCS7中如何实现DB块变量的自动上传

问题:如何实现PCS7中DB块中变量的自动上传? 解答:PCS7下,所有CFC中的变量都通过编译的方式自动上传的OS项目中,针对自定义的DB块同样也可以通过设置相关属性自动上传的OS中,具体操作如下: 插入一个全局数据块。 注意:数据块号必须符合要求,可以参考PCS7中定义的预留DB…

【代数学习题4.1】从零理解范数与迹 —— 求极小多项式

从零理解范数与迹 —— 求极小多项式 写在前面概念解释题目解答 1. 极小多项式极小多项式的求法1. 对 α \alpha α 的极小多项式python求解 2. 对 α 1 \alpha 1 α1 的极小多项式python找到多项式python找到极小多项式 3. 对 α 2 α 1 \alpha^2 \alpha 1 α2α1 的…

Android : ListView + BaseAdapter-简单应用

​​容器与适配器&#xff1a;​​​​​ http://t.csdnimg.cn/ZfAJ7 示例图&#xff1a; 实体类 News.java package com.example.mylistviewbaseadapter.entity;public class News {private String title;private String content;private int img;public News(Str…

【Linux】Linux中的基本概念

Linux中的基本概念 1. 路径分隔符/2. 当前目录 .3. 返回上级目录 . .目录结构&#xff1a;多叉树 4. 路径5. 路径 { 绝对路径 相对路径 }6. * 通配符 指定路径下的所有文件7. 同级目录下&#xff0c;不允许存在同名文件&#xff0c;或者同名目录8. 命令的本质就是可执行文件9…

第三方模块远程注入到软件中引发软件异常的若干实战案例分享

目录 1、概述 2、老版本的输入法导致软件CPU频繁跳高&#xff08;导致软件出现卡顿&#xff09;的问题 3、QQ拼音输入法注入到安装包进程中&#xff0c;导致安装包主线程卡死问题 3.1、多线程死锁分析 3.2、进一步研究 4、安全软件注入到软件中&#xff0c;注入模块发生了…

什么是图神经网络

当这两种技术融合在一起时&#xff0c;就可以创造出一些新颖、奇妙的东西——比如手机和浏览器融合在一起&#xff0c;产生了智能手机。 如今&#xff0c;科研人员正在将人工智能发现模式的能力应用于存储各种数据点之间关系信息的大型图数据库。与此同时&#xff0c;就产生了…