位置: IT常识 - 正文

Vue3 reactive丢失响应式问题(vuex状态丢失)

编辑:rootadmin
Vue3 reactive丢失响应式问题

推荐整理分享Vue3 reactive丢失响应式问题(vuex状态丢失),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue数据丢失,vue3 reactive ref,vue3.0 reactive,vuex数据丢失怎么处理,vue3.0 reactive,vue报错文件找不到,vue3 reactive不能,vue数据丢失,内容如对您有帮助,希望把文章链接给更多的朋友!

问题描述:使用 reactive 定义的对象,重新赋值后失去了响应式,改变值视图不会发生变化。

测试代码:

<template> <div> <p>{{ title }}</p> <ul> <li v-for="(item, index) in tableData" :key="index">{{ item }}</li> </ul> </div></template><script setup> import { ref, reactive, onMounted } from 'vue' const title = ref('我是标题') let tableData = reactive([1, 2, 3]) onMounted(() => { title.value = '我是段落', tableData = [1, 1, 1] console.log("title=", title) console.log("tableData=", tableData) }) </script>

输出结果:

 

从上述测试代码中,ref 定义的对象有响应式,而 reactive 定义的对象失去了响应式,这是什么原因呢?官网中写到:

Vue3 reactive丢失响应式问题(vuex状态丢失)

如果将一个对象赋值给 ref ,那么这个对象将通过 reactive() 转为具有深层次响应式的对象。

那么,为什么 ref 调用 reactive 处理对象重新赋值后,不会丢失响应式,但 reactive 却丢失了呢?

第一步:当我们修改 xxx.value 值的时候,setter 调用了 toReactive 方法

class RefImpl { constructor(value, __v_isShallow) { this.__v_isShallow = __v_isShallow; this.dep = undefined; this.__v_isRef = true; this._rawValue = __v_isShallow ? value : toRaw(value); this._value = __v_isShallow ? value : toReactive(value); } get value() { trackRefValue(this); return this._value; // get方法返回的是_value的值 } set value(newVal) { newVal = this.__v_isShallow ? newVal : toRaw(newVal); if (hasChanged(newVal, this._rawValue)) { this._rawValue = newVal; this._value = this.__v_isShallow ? newVal : toReactive(newVal); // set方法调用 toReactive 方法 triggerRefValue(this, newVal); } }}

 第二步:toReactive 方法判断是否是对象,是的话就调用 reactive 方法

const toReactive = (value) => isObject(value) ? reactive(value) : value;

 第三步:reactive 方法,先判断数据是否是“只读”的,不是就返回 createReactiveObject() 方法处理后的数据(createReactiveObject 方法将对象通过 proxy 处理为响应式对象)

function reactive(target) { // if trying to observe a readonly proxy, return the readonly version. if (isReadonly(target)) { return target; } return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap);}结论:

ref 定义数据(包括对象)时,都会变成 RefImpl(Ref 引用对象) 类的实例,无论是修改还是重新赋值都会调用 setter,都会经过 reactive 方法处理为响应式对象。 但是 reactive 定义数据(必须是对象),是直接调用 reactive 方法处理成响应式对象。如果重新赋值,就会丢失原来响应式对象的引用地址,变成一个新的引用地址,这个新的引用地址指向的对象是没有经过 reactive 方法处理的,所以是一个普通对象,而不是响应式对象。

如何正确使用 reactive 呢?

使用 reactive 定义数据时,使用对象包含键值对的形式,那么就会避免重新赋值的问题。那么,修改测试代码为:

<template> <div> <p>{{ title }}</p> <ul> <li v-for="(item, index) in obj.tableData" :key="index">{{ item }}</li> </ul> </div></template><script setup> import { ref, reactive, onMounted } from 'vue' const title = ref('我是标题') let obj = reactive({ tableData: [1, 2, 3] }) onMounted(() => { title.value = '我是段落', obj.tableData = [1, 1, 1] }) </script>

本文链接地址:https://www.jiuchutong.com/zhishi/299456.html 转载请保留说明!

上一篇:计算机视觉-OpenCV入门讲解(计算机视觉opencv 有什么项目)

下一篇:遗传算法python进阶理解+论文复现(纯干货,附前人总结引路)(遗传算法排课代码python)

  • vivox70pro怎么设置电池百分比(vivoX70pro怎么设置照相机)

    vivox70pro怎么设置电池百分比(vivoX70pro怎么设置照相机)

  • 苹果拍照会抖什么原因(iphone拍照会抖)

    苹果拍照会抖什么原因(iphone拍照会抖)

  • 华为畅享9录屏功能在哪里(华为畅享9录屏功能在哪里设置)

    华为畅享9录屏功能在哪里(华为畅享9录屏功能在哪里设置)

  • 微信更换实名认证后零钱还在吗(微信更换实名认证)

    微信更换实名认证后零钱还在吗(微信更换实名认证)

  • 手机视频有回音和杂音是怎么办(手机视频有回音怎么处理掉)

    手机视频有回音和杂音是怎么办(手机视频有回音怎么处理掉)

  • 怎么追评(外卖怎么追评)

    怎么追评(外卖怎么追评)

  • 探探没上线会更新位置距离吗(探探上的人不上线怎么办)

    探探没上线会更新位置距离吗(探探上的人不上线怎么办)

  • 华为nova4电池容量(华为nova4电池容量80%需要换电池吗)

    华为nova4电池容量(华为nova4电池容量80%需要换电池吗)

  • 手机导航怎么横屏显示(手机导航怎么横竖屏切换)

    手机导航怎么横屏显示(手机导航怎么横竖屏切换)

  • 小米cc9e支持无线快充吗(小米cc9e支持5gwifi)

    小米cc9e支持无线快充吗(小米cc9e支持5gwifi)

  • 路由器重置之后的密码是什么(路由器重置之后连不上网)

    路由器重置之后的密码是什么(路由器重置之后连不上网)

  • OPPO手机的TeeService是什么(OPPO手机的空调遥控器在哪里)

    OPPO手机的TeeService是什么(OPPO手机的空调遥控器在哪里)

  • 抖音怎么申请第二个号登录(抖音怎么申请第二个账号并实名认证)

    抖音怎么申请第二个号登录(抖音怎么申请第二个账号并实名认证)

  • tplogincn初始密码是多少(tplogincn密码多少)

    tplogincn初始密码是多少(tplogincn密码多少)

  • 未连接上服务器是什么意思(网站进不去显示未连接上服务器)

    未连接上服务器是什么意思(网站进不去显示未连接上服务器)

  • qq举报会被对方知道吗(qq举报会不会被发现 知乎)

    qq举报会被对方知道吗(qq举报会不会被发现 知乎)

  • 华为手机怎么设置闹钟时间(华为手机怎么设置下面的三个功能键)

    华为手机怎么设置闹钟时间(华为手机怎么设置下面的三个功能键)

  • 为什么目录只生成一部分(为什么目录生不出来)

    为什么目录只生成一部分(为什么目录生不出来)

  • 荣耀20i怎么设置导航键(荣耀20i怎么设置语音唤醒功能)

    荣耀20i怎么设置导航键(荣耀20i怎么设置语音唤醒功能)

  • 苹果11怎么开启夜景模式(苹果11怎么开启电量百分比显示)

    苹果11怎么开启夜景模式(苹果11怎么开启电量百分比显示)

  • 为什么抖音动态变成了收藏(为什么抖音动态封面关掉了,别人看还是动的)

    为什么抖音动态变成了收藏(为什么抖音动态封面关掉了,别人看还是动的)

  • 蓝牙怎么改名字(电脑蓝牙怎么改名字)

    蓝牙怎么改名字(电脑蓝牙怎么改名字)

  • 抬头唤醒功能费电吗(抬头唤醒次数在哪可以看到)

    抬头唤醒功能费电吗(抬头唤醒次数在哪可以看到)

  • 12123申诉改手机要多久(12123手机更改申诉多久有结果)

    12123申诉改手机要多久(12123手机更改申诉多久有结果)

  • vⅰvo手机的字体大小怎么调(ⅴiv0y66手机字体变大从哪里找)

    vⅰvo手机的字体大小怎么调(ⅴiv0y66手机字体变大从哪里找)

  • 为什么朋友圈只能发10秒视频(为什么朋友圈只有一条横线)

    为什么朋友圈只能发10秒视频(为什么朋友圈只有一条横线)

  • Linux常用文件与网络操作命令速记指南(linux中常用的文件类型有哪些如何区分)

    Linux常用文件与网络操作命令速记指南(linux中常用的文件类型有哪些如何区分)

  • 2022年终总结:少年不惧岁月长,彼方尚有荣光在。(2022年终总结)

    2022年终总结:少年不惧岁月长,彼方尚有荣光在。(2022年终总结)

  • 企业所得税不得扣除的税金
  • 减资需要交个税吗
  • 内含报酬率指
  • 员工工资计入管理费用吗
  • 员工垫资报销记账
  • 验钞机怎么做账
  • etc预付发票可以抵税吗
  • 报销是否需要发票
  • 民办学校账务怎么做
  • 出差人员报销差额怎么算
  • 进口增值税关税怎么付
  • 付给私人股权转让权怎么做分录?
  • 用银行汇票付款的会计分录
  • 房地产企业所得税清算条件
  • 工资发错了,多发了怎么办
  • 怎么查以前申报的财务报表
  • 汽车发票金额怎么算
  • 个人挂靠公司按揭购车账务怎么处理?
  • 公司给员工发放的福利都要扣个税吗
  • 单位开具发票
  • 真实有效的18岁身份证
  • 长期股权投资特征
  • 本期用于购建不动产的扣税凭证怎么填
  • 排污费计入应交税费吗
  • PHP:oci_fetch_array()的用法_Oracle函数
  • windows7旗舰版最新版本
  • wrme.exe是什么
  • thinkphp5.1完全开发手册
  • 房地产企业开始退地的影响
  • 收到质量赔款做什么会计科目
  • 企业所得税申报表模板
  • command对象可以执行sql语句吗
  • 前端大佬都有谁
  • 此战成硕,我成功上岸西南交通大学了~~~
  • 小程序微信认证
  • php红包源码
  • lvm命令详解
  • 什么是其他综合收益,包括哪些内容
  • 认证后失控发票管理办法
  • 织梦添加文章如何修改高级参数
  • 购买项目用设备计入什么科目
  • 公帐的钱可以转到其他人帐户吗
  • 公户直接转给私人账户违法么
  • 非独立核算的分公司需要独立建账吗
  • 合同权益转让 范本
  • 以旧换新有发票抵扣吗
  • 买新车检测费
  • 浅谈数据库优化设计
  • sqlserver2005 TSql新功能学习总结(数据类型篇)
  • 公司的现金收入存到个人账户在转到公司指定的私人账户
  • 社保刚转回来,生孩子能报销吗
  • 厂房监理要点
  • 出口收汇手续费需要在出口退税时扣除吗
  • 企业给员工单独交社保
  • 从事国家重点扶持的公共基础项目
  • 考试报名费都去哪了
  • 业务提成需要缴纳个人所得税吗?
  • 本年利润的年末余额
  • 集装箱发票是否要在备注栏注明地址
  • 线上MYSQL同步报错故障处理方法总结(必看篇)
  • xp系统提升cpu最高性能
  • 苹果发布会最新消息
  • 正确安全管理操作手册
  • win8如何安装win10系统
  • linux系统中安装jar包没有
  • windows8.1备份
  • Mac如何使用Excel
  • win10一年更新几次
  • WIN10更新失败
  • 微信小程序商品列表代码
  • js 数组 增加元素
  • 详解16型人格
  • static function FindObjectsOfType (type : Type) : Object[]
  • android 入门教程
  • python程序解析
  • 基层税务工作难点重点热点
  • 税务安装步骤
  • 外经证办理流程在哪个网站申请
  • 中国税务报多少钱
  • 车辆购置税非本人可以代缴吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设