Vue3-04-reactive() 响应式失效的三种情况

news2024/12/22 15:29:01

1.替换对象后导致失效

简单理解 : 变量指向的对象换了,对原来的对象,当然没有了响应式的效果了。
    // 声明 变量
    let obj1 = reactive({name:"第一个对象"})
    // 改变 变量的指向
    obj1 = reactive({name:"第二个对象的属性"})
    console.log('obj1.name : ',obj1.name)

在这里插入图片描述

2.解构之后导致失效

将 reactive() 的对象解构成本地变量之后,
直接操作本地变量,是不会影响 原对象的属性值的。
这个也好理解,可以把解构看作是 定义了一个新的普通变量,
修改普通变量的值,当然是不会对响应式对象造成影响了,它俩根本就不是一个对象。
    // 声明 变量
    const obj2 = reactive({id:1002,name:"第一个对象"})
    // 解构出来 并重新赋值
    let {name,id} = obj2;
    id = 2002;
    name = '本地变量name的值'
    // obj2 不会改变,但是 name 和 id 的值会发生变化
    console.log('obj2 : ',obj2)
    console.log('name : ',name)
    console.log('id : ',id)

在这里插入图片描述

3.属性直接作为函数参数导致失效

将 reactice() 对象的属性,单独作为函数参数的时候,
若函数体内对此属性进行了修改,也不会对原属性产生影响。
可以理解为 是一种【值传递】的方式,而非 【引用传递】。

补充 : 
    但是,如果函数的参数是直接把整个的对象传进去的,则该对象让然保持响应式的状态!
    此处可以理解为【引用传递】。

属性作为参数案例

    // 声明 变量
    const obj2 = reactive({id:1002,name:"第一个对象"})

    // 定义一个函数
    const sayHello = (name:string):void => {
        console.log('hello-1 : '+name)
        // 对参数进行修改
        name = '修改后的名称'
        console.log('hello-2 : ',name)
    } 
    // 调用函数 
    sayHello(obj2.name)

  
    // obj2 不会改变,属性值还是原来的值
    console.log('obj2 : ',obj2)

在这里插入图片描述

整个对象作为参数


    // 声明 变量
    const obj2 = reactive({id:1002,name:"第一个对象"})

    // 定义一个函数
    const sayObj = (abc:any) =>{
        abc.name = 'aaa'
        console.log('对象属性修改完成')
    }
    
    sayObj(obj2)
   

    // obj2 不会改变,属性值还是原来的值
    console.log('obj2 : ',obj2)

在这里插入图片描述

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

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

相关文章

三天精通Selenium Web 自动化 - Selenium(Java)环境搭建 (new)

0 背景 开发工具idea代码管理mavenjdk1.8webdriver chrome 1 chromedriver & chrome chromedriver和chrome要对应上: chomedriver下载地址:淘宝镜像 这里用的是 chromedriver88-0-4324-96.zipchrome下载地址:如何降级和安装旧版本的C…

【计算机网络基础3】ARP/RARP协议、路由选择协议和TCP/IP协议

1、ARP/RARP协议 地址解析协议,即ARP(Address Resolution Protocol),是根据IP地址获取物理地址的一个TCP/IP协议。主机发送信息时将包含目标IP地址的ARP请求广播到网络上的所有主机,并接收返回消息,以此确…

HTTP深度解析:构建高效与安全网络的关键知识

1. HTTP基础及其组件 我首先想和大家分享的是HTTP的基础知识。HTTP,即超文本传输协议,是互联网上最常用的协议之一。它定义了浏览器和服务器之间数据交换的规则,使得网页内容可以从服务器传输到我们的浏览器上。想象一下,每当你点…

kafka配置多个消费者groupid kafka多个消费者消费同一个partition(java)

目录 1- 单播模式,只有一个消费者组2- 广播模式,多个消费者组3- Java实践 kafka是由Apache软件基金会开发的一个开源流处理平台。kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者在网站中的所有动作流数据。 kafka中partition…

Linux实用操作(超级实用)

Linux实用操作篇-上篇:Linux实用操作-上篇-CSDN博客 Linux实用操作篇-下篇:Linux实用操作篇-下篇-CSDN博客 一、各类小技巧(快捷键) 1.1 ctrl c 强制停止 Linux某些程序的运行,如果想要强制停止它,可以…

Redis缓存异常问题,常用解决方案总结

前言 Redis缓存异常问题分别是:1.缓存雪崩。2.缓存预热。3.缓存穿透。4.缓存降级。5.缓存击穿,以 及对应Redis缓存异常问题解决方案。 1.缓存雪崩 1.1、什么是缓存雪崩 如果缓存集中在一段时间内失效,发生大量的缓存穿透,所有…

【MySQL】MySQL数据库基础--什么是数据库/基本使用/MySQL架构/存储引擎

文章目录 1.什么是数据库2.主流数据库3.基本使用3.1MySQL安装3.2连接服务器3.3服务器管理3.4服务器,数据库,表关系3.5使用案例3.6数据逻辑存储 4.MySQL架构5.SQL分类6.存储引擎6.1什么是存储引擎6.2查看存储引擎6.3存储引擎对比 1.什么是数据库 对于回答…

MySQL笔记-第18章_MySQL8其它新特性

视频链接:【MySQL数据库入门到大牛,mysql安装到优化,百科全书级,全网天花板】 文章目录 第18章_MySQL8其它新特性1. MySQL8新特性概述1.1 MySQL8.0 新增特性1.2 MySQL8.0移除的旧特性 2. 新特性1:窗口函数2.1 使用窗口…

【LeetCode刷题-树】--144.二叉树的前序遍历

144.二叉树的前序遍历 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNode right) …

『npm』一条命令快速配置npm淘宝国内镜像

📣读完这篇文章里你能收获到 一条命令快速切换至淘宝镜像恢复官方镜像 文章目录 一、设置淘宝镜像源二、恢复官方镜像源三、查看当前使用的镜像 一、设置淘宝镜像源 npm config set registry https://registry.npm.taobao.org服务器建议全局设置 sudo npm config…

HarmonyOS使用Tabs组件实现页面切换

Tabs组件的使用 概述 在我们常用的应用中,经常会有视图内容切换的场景,来展示更加丰富的内容。比如下面这个页面,点击底部的页签的选项,可以实现“首页”和“我的” 两个内容视图的切换。 ArkUI开发框架提供了一种页签容器组件…

Pytorch中Group Normalization的具体实现

Group Normalization (GN) 是一种用于深度神经网络中的归一化方法,它将每个样本划分为小组,并在每个小组内进行标准化。与批归一化(Batch Normalization)不同,Group Normalization 不依赖于小批量数据,因此…

【Hadoop_04】HDFS的API操作与读写流程

1、HDFS的API操作1.1 客户端环境准备1.2 API创建文件夹1.3 API上传1.4 API参数的优先级1.5 API文件夹下载1.6 API文件删除1.7 API文件更名和移动1.8 API文件详情和查看1.9 API文件和文件夹判断 2、HDFS的读写流程(面试重点)2.1 HDFS写数据流程2.2 网络拓…

[Angular] 笔记1:开发设置 , 双向绑定

1 设置开发环境 1.1 安装 node 下载 node,因为要使用 npm 工具,教程中使用 Angualr 14, 最新版 node 20 用不了,安装 node 16 就可以。 1.2 安装 Angular CLI Angular CLI 是用于创建 Angular 工程的工具集,使用如下命令&…

HTML实现页面

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>工商银行电子汇款单</title> </head> &…

数据挖掘目标(客户价值分析)

import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as snsIn [2]: datapd.read_csv(r../教师文件/air_data.csv)In [3]: data.head()Out[3]: Start_timeEnd_timeFareCityAgeFlight_countAvg_discountFlight_mileage02011/08/182014/0…

网络基础(八):路由器的基本原理及配置

目录 1、路由概述 2、路由器 2.1路由器的工作原理 2.2路由器的转发原理 3、路由表 3.1路由表的概述 3.2路由表的形成 4、静态路由配置过程&#xff08;使用eNSP软件配置&#xff09; 4.1两个静态路由器配置过程 4.2三个静态路由器配置过程 5、默认路由配置过程 5.…

得帆云为玉柴打造CRM售后服务管理系统,实现服务全过程管理|基于得帆云低代码的CRM案例系列

广西玉柴机器股份有限公司 广西玉柴机器股份有限公司始建于1992年&#xff0c;是国内行业首家赴境外上市的中外合资企业&#xff0c;产品远销亚欧美非等180多个国家和地区。公司总部设在广西玉林市&#xff0c;下辖11家子公司&#xff0c;生产基地布局广西、江苏、安徽、山东等…

收发货拥抱新技术,纵行科技推ZETag方案实现更精准的自动识别

对于制造及物流企业来说&#xff0c;收发货是影响其运营效率和成本控制的关键因素。然而传统的收发货管理高度依赖人工核对&#xff0c;比如目前国内汽车工厂零件到货验收主要采用人工方式&#xff0c;验收人员需根据送货看板进行数量清点&#xff0c;确认无误后用手持终端扫描…

多维时序 | Matlab实现GA-LSTM-Attention遗传算法优化长短期记忆神经网络融合注意力机制多变量时间序列预测

多维时序 | MATLAB实现BWO-CNN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测 目录 多维时序 | MATLAB实现BWO-CNN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 多维时序 | Matlab实…