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

  • wps绘图工具栏如何调出来(wps绘图工具怎么才能在工作栏显示)

    wps绘图工具栏如何调出来(wps绘图工具怎么才能在工作栏显示)

  • 苹果序列号c开头什么意思(苹果序列号C开头是什么版本)

    苹果序列号c开头什么意思(苹果序列号C开头是什么版本)

  • 苹果截图设置在哪里(苹果截图在哪里设置?)

    苹果截图设置在哪里(苹果截图在哪里设置?)

  • 电脑重装系统失败,现在不进系统怎么办

    电脑重装系统失败,现在不进系统怎么办

  • 旧款mac不支持u盘启动(mac不可以插u盘)

    旧款mac不支持u盘启动(mac不可以插u盘)

  • 华为手机照片怎么显示手机型号(华为手机照片怎么提取文字)

    华为手机照片怎么显示手机型号(华为手机照片怎么提取文字)

  • flash路径动画(flash路径动画的基本制作方法)

    flash路径动画(flash路径动画的基本制作方法)

  • 在朋友圈如何发15秒视频(在朋友圈如何发视频号)

    在朋友圈如何发15秒视频(在朋友圈如何发视频号)

  • wlan认证方式有哪两种(wifi认证方式是什么意思)

    wlan认证方式有哪两种(wifi认证方式是什么意思)

  • 华为mate30可以使用北斗导航吗(华为mate30能)

    华为mate30可以使用北斗导航吗(华为mate30能)

  • 红米7后盖如何打开(红米7后盖如何拆)

    红米7后盖如何打开(红米7后盖如何拆)

  • a1709是什么型号(A1709是什么型号的iPad)

    a1709是什么型号(A1709是什么型号的iPad)

  • novell网是局域网吗(局域网络的简称是)

    novell网是局域网吗(局域网络的简称是)

  • 腾讯视频vip有什么用(腾讯视频VIP有什么好看的剧)

    腾讯视频vip有什么用(腾讯视频VIP有什么好看的剧)

  • 华为平板能不能打电话(华为平板能不能插内存卡)

    华为平板能不能打电话(华为平板能不能插内存卡)

  • 怎样避免被好友拉进群(怎样避免被好友拉进群聊)

    怎样避免被好友拉进群(怎样避免被好友拉进群聊)

  • 幻灯片设计模板在哪里(幻灯片设计模板柏林)

    幻灯片设计模板在哪里(幻灯片设计模板柏林)

  • word如何加分页符(word如何分页阅读)

    word如何加分页符(word如何分页阅读)

  • 天猫精灵CCL要一直插电吗(天猫精灵cch7)

    天猫精灵CCL要一直插电吗(天猫精灵cch7)

  • airpods有可能出黑色吗(airpods会降价吗?)

    airpods有可能出黑色吗(airpods会降价吗?)

  • 苹果商店搜不到小红书(苹果商店搜不到的app怎么下载)

    苹果商店搜不到小红书(苹果商店搜不到的app怎么下载)

  • 什么是数据库的第一道保障(什么是数据库的核心和基础)

    什么是数据库的第一道保障(什么是数据库的核心和基础)

  • 淘宝网店铺上的钻石是什么意思(淘宝网店铺上的店铺名称)

    淘宝网店铺上的钻石是什么意思(淘宝网店铺上的店铺名称)

  • 拼多多小刀在哪里找的(拼多多找小刀怎么找不到呀)

    拼多多小刀在哪里找的(拼多多找小刀怎么找不到呀)

  • 安卓手机如何更换动态壁纸(安卓手机如何更新whatsapp)

    安卓手机如何更换动态壁纸(安卓手机如何更新whatsapp)

  • nova5i电池容量(nova5的电池容量)

    nova5i电池容量(nova5的电池容量)

  • 拼多多复活卡在哪里找(拼多多复活卡可以复活砍价免费拿吗)

    拼多多复活卡在哪里找(拼多多复活卡可以复活砍价免费拿吗)

  • word一键求和(word怎么一列求和)

    word一键求和(word怎么一列求和)

  • 服务行业人工费计入什么科目
  • 盈余公积发放现金股利分录怎么写
  • 企业所得税税前扣除政策
  • 以前年度损益调整结转到哪里
  • 增值税发票税控开票软件打不开
  • 普通折叠发票代码是几位数
  • 小规模纳税人印花税怎样计算
  • 固定资产折旧年限
  • 房地产开发企业土地增值税清算
  • 房产税征税税率
  • 同一个客户有应收也有应付怎么办
  • 外出参加会议费用怎么算
  • 印花税计算公式例子
  • 公司开发票就会报税吗?
  • 劳务清包工可以开3个点的票么
  • 个人借款给公司利息多少合法
  • 出口已使用过的设备退税吗
  • 可供出售金融资产属于流动资产吗
  • 破产清算重整和解
  • 进口料件和出口成品的关系
  • 租房押金收不回来怎么做账
  • 企业报税提交清算了怎么撤销
  • 收到一张免税发票能抵税吗
  • 其他应付款转增股本
  • 内部控制的概念最早是从什么得来的
  • 企业党建活动经费管理办法的规定
  • php utf8转gb2312
  • thinkphp withjoin
  • php生成文件流
  • i9是多少纳米的芯片
  • 前端字符长度限制
  • 搬迁收入税务筹划
  • ccmexec.exe是什么程序
  • 外购产品视同自产产品办理免抵退税的条件有哪几种
  • hpzts04.exe是什么进程 有什么作用 hpzts04进程查询
  • 阿德莱德 景点
  • php能开发微信小程序吗
  • 小规模纳税人避税
  • 计提企业税费和缴纳分录怎么做
  • 专项应付款转资本公积需要什么附件
  • ROS2+cartographer+激光雷达+IMU里程计数据融合(robot_locazation) 建图
  • sql代码大全
  • 金税盘锁死状态
  • css基础实验报告
  • 命令行激活profile命令的格式
  • 简单易学的前端框架
  • etc电子发票需要多久才能开
  • 残保金工资总额包括什么
  • 增量留抵税额退还举例
  • 原始凭证分割单可以入账么
  • 开票机号填错了怎么办
  • 一般纳税人金税盘怎么清卡
  • 付款人和开票人必须相符吗
  • 行政单位汽车加油无明细怎么办
  • 增值税期末有留抵税额应该怎么结转
  • 已开票未收款如何销往来账
  • 新厂配电工程建设流程
  • 原材料的采购成本怎么计算
  • 坏账收不回来如何做分录
  • 预付账款的会计处理
  • 存货跌价准备的计算
  • 在分公司签的合同能转到总公司吗?
  • 账簿设计要以()为前提
  • mysql查询单条数据
  • win7 32位装ie11
  • win10周年更新版是什么意思
  • ftpr
  • win7升级到win10专业版教程
  • 访问win10
  • linux终端怎么用
  • android4.4w
  • css 网页布局
  • shell编程入门
  • python 聚类算法包
  • uleb128、sleb128和uleb128p1编码格式介绍
  • 基于javascript的毕业设计选题
  • 面向对象的三大特征
  • 小规模纳税人收到增值税专用发票怎么办
  • 国家税务总局全国增值税查询
  • 财税专业全称叫什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设