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

  • 金税盘的会计科目
  • 工商注册经营部和公司的区别
  • 物业公司要交税吗?
  • 企业所得税应纳税额
  • 增值税发票税率13%怎么回事
  • 分支机构注销后往来账如何处理
  • 免费样品需要交印花税吗
  • 每股收益无差别点计算公式怎么解
  • 增值税纳税申报表模板
  • 小规模纳税人收到专票后如何处理
  • 微商怎么交易流程
  • 地下建筑物应该怎样缴纳城镇土地使用税?
  • 增值税年底如何计算
  • 银行代扣出口快递费用
  • 预计负债收回的会计分录
  • 社保基金的管理模式
  • 房地产开发公司取名
  • 拒绝税务检查的情形
  • 营改增的优惠政策
  • 使用权资产什么时候开始使用
  • 跨地区经营汇总纳税企业所得税
  • 公司投资另外一个公司全资占股需要什么流程
  • 办公家具可以一次性抵扣吗?
  • 金蝶标准版利润表季度怎么选
  • 佳能2900打印机加碳粉教程
  • 收到发票怎么写说明
  • PHP:mb_strtoupper()的用法_mbstring函数
  • 方正电脑u盘启动按什么键
  • php -i
  • asmproserver.exe是什么进程 asmproserver进程信息查询
  • 公路客运车辆
  • 最小的手机有多大
  • 美国大峡谷在哪儿
  • php生成二维码海报
  • php屏蔽错误
  • php数据库管理
  • html 提交表单
  • 前端必学课程
  • dos命令怎么转到d盘
  • 应付利息和利息支出什么时候用
  • phpcms上传视频
  • 农民工专用账户回执单
  • phpcms怎么用
  • 帝国cms扣除会员怎么办
  • Python中__slots__限制属性
  • 微信支付算库存商品吗
  • 取得投资是什么意思
  • sqlserver2008r2数据库导出教程
  • sql server索引怎么用
  • 购进固定资产的账务处理
  • 公司买的茶叶怎么入账
  • 抵债资产如何做债权转让
  • 收到的发票怎么做分录
  • 政府补贴递延收益的摊销时间
  • 员工预支工资规则
  • 托管服务费开什么发票
  • 主营业务毛利率和毛利率
  • 企业租用个人房屋的财税处理
  • 固定资产帐怎么做
  • linux bin sbin
  • mysql8.0 主从
  • 如何在卸载程序中隐藏已安装程序
  • 苹果mac共享改名
  • centos桌面调出命令行
  • MSAPI.DAT,WINDNSAPI.DAT是什么文件
  • 电脑xp桌面
  • graphics.dll
  • win8系统ie浏览器打不开
  • Win10 Mobile 10586.36在Lumia640 XL中的体验 很流畅
  • drawand paint
  • 安卓病毒查杀软件
  • getmac/v
  • unity做网页
  • 电子税务局内蒙古自治区
  • 电子普票最多领多少
  • 增值税税率最新
  • 税控盘抄报反写工作难度
  • 2022年企业所得税税率2.5% 10% 25%
  • 车船税优惠政策2022年
  • 国家税务总局全国增值税查验平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设