位置: 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)

  • 电子设备租赁费专票税率
  • 个人所得税纳税义务人
  • 旅游公司的账务框架
  • 汇算清缴补缴税款如何做账
  • 公司购入烟酒会计处理
  • 生产成本里面的直接人工
  • 农民工工资保证金管理暂行办法
  • 高铁票抵扣税率怎么计算
  • 银行网银服务费做什么科目
  • 企业租赁个人房屋怎么交税
  • 资产减值损失为什么不能转回
  • 个体工商户注销后的责任承担问题
  • 收到承兑如何贴现
  • 建筑清包工的账务处理
  • 社会保险基金管理局是干什么的
  • 股权转让个人交的印花税可以入账吗
  • 发票 抵扣联
  • 小规模企业残疾人免税政策
  • 促销费属于哪个税目
  • 股票期权个人所得税税率表
  • 货运发票与运输发票的区别
  • 企业外币账户清单哪里能查到
  • 未确认融资费用的期初余额
  • 固定资产减值准备可以税前扣除吗
  • w10系统程序停止运行
  • win7桌面快捷键是什么
  • 应交税费年末账务处理
  • 计提债券本年利息分录
  • 测速网在线测速
  • win 11 bug
  • windowsserver2019安装教程
  • 业务招待费汇算清缴扣除标准
  • 工业企业汽车发生费用处理
  • Http请求-hutool工具类的使用
  • fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
  • 购买增值税税控系统专用设备账务处理
  • 营业执照年检认缴和实缴怎么填
  • php登录注册
  • php页面刷新代码
  • 冲回上年计提费用
  • 分公司独立核算和非独立核算哪个好
  • echarts series name
  • php改html
  • 发票打印错误如何修改
  • 增值税发票的认证
  • linux中ubuntu安装教程
  • 我想问一下移动
  • 财务报表的组成主要包括
  • 现金结算的特点和概念
  • mysql密码忘了
  • 会计上视同销售的八种情况是哪些?
  • 研究费用记入什么费用
  • 应收应付抹零账务处理
  • 筹建期的印花税怎么算
  • 会计凭证保管期限30年是哪一年开始的
  • 什么税能计入税额
  • 财务的材质怎么写
  • 工会经费能零申报保存不起
  • 会计信息不采集可以考初级吗
  • 土地出让的钱归谁
  • 成本与费用的区别联系
  • 非营利医疗机构免征哪几种税
  • mac怎么用bootcamp
  • win10系统打印机脱机状态怎么恢复正常打印
  • mac终端好玩的命令
  • WIN10更新失败
  • 如何解决老电脑卡顿问题
  • opengl es programming guide
  • node.js实战
  • 在dos中文件是以什么目录结构
  • herd什么意思
  • vue路由怎么实现
  • jQuery Validation PlugIn的使用方法详解
  • 使用jquery
  • shell脚本视频教程
  • 国家税务总局全国增值税查询
  • 江西国家税务局官网
  • 税务相关文件
  • 广东国家税务局网上税务服务大厅
  • 荆州区国税局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设