vue3,ref和reactive声明变量有什么区别,分别怎么用

vue/vue3,ref和reactive声明变量有什么区别,分别怎么用

  • 适用的变量类型不同
  • 在js中获取值的方式不同
  • 侦听深度不同
  • 响应性区别

适用的变量类型不同

  1. 对于原始类型,即非对象类型,只能用ref
  2. 对于对象类型,既可以用ref,也可以用reactive

在js中获取值的方式不同

  1. 在js中,获取ref声明的变量值,需要通过 .value 获取
  2. 获取react声明的变量值,直接获取即可

侦听深度不同

  1. 如果侦听ref声明的对象类型变量,当变量的属性发生变化时,不触发侦听,需要设置深度侦听{deep:true}
  2. 如果侦听reactive声明的变量,当变量的属性发生变化时,触发侦听,无需设置深度侦听

响应性区别

  1. ref声明的对象类型变量,可以通过 .value直接用新的对象赋值,改变变量的值,变量响应性存在
  2. 给reactive包裹的对象类型变量重新赋值,变量响应性消失,该方法不可取。
  3. reactive包裹的对象可以通过Vue.set()方法来重新赋值
  4. reactive包裹的对象给其属性赋值,是不会影响响应性的

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

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

相关文章

软考中高级案例分析通用答题方法

在软考高级信息系统项目管理师和中级系统集成项目管理工程师考试中,案例分析是一个重要的题型。下面分享几种通用答题方法和个人经验,希望能对大家有所帮助。 历年考试中经常考察的内容 首先,范围管理、进度管理、成本管理、质量管理这四大管…

Mongo 常用操作命令

一、查询都有哪些数据库 show dbs二、切换到指定数据库 use database 三、删除数据库 注意:需要先切换到指定数据库,再执行删除指令 db.dropDatabase()四、显示数据库都有哪些数据表 show tables 五、查看整个数据库的统计情况 db.stats() 六、查…

C++ 子序列

目录 最长递增子序列 摆动序列 最长递增子序列的个数 最长数对链 最长定差子序列 最长的斐波那契子序列的长度 最长等差数列 等差数列划分 II - 子序列 最长递增子序列 300. 最长递增子序列 子数组是连续的,子序列可以不连续,那么就要去[0, i - 1]…

学习AI为啥要掌握高等数学中的线性代数

人工智能为啥要掌握高等数学中的线性代数,这是因为线性代数在人工智能领域扮演着至关重要的角色,其作用体现在以下几个方面: 数据表示: •线性代数中的向量和矩阵是描述和组织数据的重要工具,尤其在机器学习和深度学习…

seleniumui自动化实例-邮箱登录

1.登录163邮箱源码: from selenium import webdriver driver webdriver.Firefox() driver.get("http://www.163.com") driver.find_element_by_id("id").clear() driver.find_element_by_id("id").send_keys("用户名")…

【CKA模拟题】掌握Pod日志输出的秘密

题干 For this question, please set this context (In exam, diff cluster name) 对于这个问题,请设置这个上下文(在考试中,diff cluster name) kubectl config use-context kubernetes-adminkubernetes product pod is running. when you access log…

【算法刷题day1】Leetcode:704. 二分查找、27. 移除元素

Leetcode 704:标准二分查找 文档讲解:代码随想录 题目链接:704.二分查找 状态:稳定输出 题目: 给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函数搜索 n…

在Linux环境底下 用C语言执行Python程序

在Linux环境底下 用C语言执行Python程序 文章目录 在Linux环境底下 用C语言执行Python程序1、环境安装&检测2、C语言调用Python语句2.1 直接调用python语句2.2 调用无参python函数2.3 调用有参python函数 1、环境安装&检测 通过C语言调用Python代码,需要先安…

springboot企业级抽奖项目业务二(用户模块)

书接上回,梅开二度 开发流程 该业务基于rouyi生成好了mapper和service的代码,现在需要在controller层写接口 实际操作流程: 看接口文档一>controller里定义函数一>看给出的工具类一>补全controller里的函数一>运行测试 接口…

rust 文件引用,父目录下的同级目录之间的引用

父目录下的同级目录之间的引用 例如有: src/component/aaa.rs src/component/mod.rs // 有 pub mod aaa; src/module/bbb.rs src/module/mod.rs // 有 pub mod bbb; src/main.rs // 有 mod module;如果 bbb.rs要引用aaa.rs: 在main.rs再加上mod compo…

如何快速用docker run启动一个linux环境(debian/ubuntu)

如何快速用docker run启动一个linux环境(debian/ubuntu) 文章目录 前言正文拉取镜像启动镜像 总结 前言 如何快速启动一个docker环境用于调式或相关用途,该环节具备某一特定系统所有相关组件及依赖库,并将本地目录挂载到目标路径…

C++基础部分

万能模板 #include<bits/stdc.h> 数组长度 size_t n sizeof(a)/sizeof(a[0]);控制台输入数据的处理 &#xff08;1&#xff09;字符串——getline(cin,s) #include<bits/stdc.h> using namespace std;int main() {string s1,s2;getline(cin,s1);getline(cin,s…

【数据结构】堆和树详解堆和二叉树的实现堆的top-k问题

主页&#xff1a;醋溜马桶圈-CSDN博客 专栏&#xff1a;数据结构_醋溜马桶圈的博客-CSDN博客 gitee&#xff1a;mnxcc (mnxcc) - Gitee.com 目录 1.树概念及结构 1.1 树的概念 2.2 树的相关概念 1.3 树的表示 1.4 树在实际中的运用 2.二叉树的概念及结构 2.1 二叉树的概念…

vue前端解析jwt

vue前端解析jwt 我们可以用在线解析看解析的结果&#xff1a;https://www.lddgo.net/encrypt/jwt-decrypt 但是如果在前端需要解析token&#xff0c;拿到其中的权限信息&#xff0c;可以这样解决。 在线的&#xff1a; 完美解决&#xff1a; 代码&#xff1a; function par…

MySQL | 表的约束

目录 1. 空属性 NULL 2. 默认值 DEFAULT 3. 列描述comment 4. zerofill 5. 主键 PRIMARY KEY 6. 自增长AUTO_INCREMENT 7. 唯一键UNIQUE 8. 外键 真正约束字段的是数据类型&#xff0c;但是数据类型约束很单一&#xff0c;需要有一些额外的约束&#xff0c;更好的保证数…

web前端常用标签(html)

1.定义 1.1标签 语法规范&#xff1a;<标签名 属性名"属性值">标签名</标签名> 标签之间可以嵌套 1.2属性 定制元素的行为的。属性是不通用的&#xff0c;每一个标签存在自身的属性。当属性名属性值时&#xff0c;可以只写属性值 2.HTML常用标签 2…

前端项目构建过程中涉及低代码部分思考

表单常见的增删查改的重复问题解决 1市面上有很多表单设计器与框架进行结合&#xff0c;封装一个表单组件&#xff0c;结合响应式&#xff0c;然后给到我们下载使用 2修改起来很麻烦&#xff0c;有局限&#xff0c;但我们可以参考他们的思路&#xff0c;来设计符合项目的组件来…

面试笔记——Redis(分布式锁的使用场景及实现原理)

分布式锁的使用场景 资源竞争控制&#xff1a;多个客户端同时访问共享资源时&#xff0c;可以使用分布式锁来控制资源的并发访问&#xff0c;防止多个客户端同时对同一资源进行修改造成数据不一致的问题。 避免重复操作&#xff1a;在分布式环境中&#xff0c;可能会出现多个客…

算法51:动态规划专练(力扣139题,单词拆分)---从左往右尝试模型的误区

题目&#xff1a; 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。如果可以利用字典中出现的一个或多个单词拼接出 s 则返回 true。 注意&#xff1a;不要求字典中出现的单词全部都使用&#xff0c;并且字典中的单词可以重复使用。 示例 1&#xff1a; 输入: s &qu…

如何实现手机遥控端关机按钮同时关闭TV端和手机端界面

目前家庭电视机主要通过其自带的遥控器进行操控&#xff0c;实现的功能较为单一。例如&#xff0c;当我们要在TV端搜索节目时&#xff0c;电视机在遥控器的操控下往往只能完成一些字母或数字的输入&#xff0c;而无法输入其他复杂的内容。分布式遥控器将手机的输入能力和电视遥…