vue3 - 使用reactive定义响应式数据进行列表赋值时,视图没有更新的解决方案

文章目录

    • 1,问题
    • 2,原因
    • 3,解决方案
      • 一、再封装一层数据,即定义属性名,在后期赋值的时候,对此属性进行直接赋值
      • 三、使用数组的`splice`来直接更改原数组
      • 三、使用 ref 来定义数据

1,问题

在Vue 3.0 中我们使用 reactive() 定义的响应式数据的时候,当是一个数组或对象时,我们直接进行赋值,发现数据已经修改成功,但是页⾯并没有自动渲染成最新的数据;这是为什么呢?

就如同官网所说的reactive存在一些局限性:(官方的描述)

在这里插入图片描述

2,原因

原因就是reactive函数会返回一个Proxy包装的对象,所以当我们这样直接赋值时:(看下面例子)

import { reactive } from "vue";let userInfo = reactive([{name:'Eula'}]) 
console.log(userInfo) // Proxy(Array) 打印出来是一个Proxy对象 当然具备响应式// 直接后端数据进行赋值
userInfo = [{name:'优菈'}]
console.log(userInfo)  // [{name:'优菈'}] 可以看出 就是打印出了一个普通的数组 所以不具备响应式

这样赋值的话,就会把Proxy对象给覆盖掉,从而无法触发对应的set和get,最终就会导致丢失掉响应性了;

上面的代码 reactive([{name:'Eula'}]) 创建了一个响应式数组,返回一个Proxy包装的对象由userInfo变量进行存放,但是后面我又把一个普通的数组(也就是后端返回的数据)赋值给userInfo,注意这时userInfo这个变量存放的已经是一个普通的数组了,当然也就不具备响应式了;

所以:对于reactive创建的响应式数据应该避免直接使用=号进行赋值;会覆盖响应式;


3,解决方案

一、再封装一层数据,即定义属性名,在后期赋值的时候,对此属性进行直接赋值

再封装一层数据,注意myRenderList 这个属性就是新增的属性用来存放列表数据,就是比较麻烦了一些。

<script setup>
import { reactive, ref } from "vue";
// 定义响应式 
let list1 = reactive({myRenderList:[]});// 请求的数据
let newList1 = [{ name: "Eula", age: "18", isActive: false },{ name: "Umbra", age: "17", isActive: false },
]// 更改数据
const setList1 = () => {list1.myRenderList = newList1
}
</script>

三、使用数组的splice来直接更改原数组

还是用reactive来定义响应式数据,只不过改数据的方式变了,使用数组的原生方法splice()来更改原数组,不是直接覆盖所以并不会影响响应式;

splice有三个参数时,可以对数组进行修改, 第一项是起始索引, 第二项是长度, 第三项是新插入的元素,可以有多个;

下面的代码是把之前数组的每一项删除掉,然后插入新的数据newList1,使用...扩展符进行展开每一项;

 list1.splice(0,list1.length,...newList1)

当然,push()方法也是可以触发响应式的,只不过只能在后面新增数据。还有pop,shift,unshift等方法(用的不多)

<script setup>
import { reactive, ref } from "vue";
// 定义响应式 
let list1 = reactive([]);// 请求的数据
let newList1 = [{ name: "Eula", age: "18", isActive: false },{ name: "Umbra", age: "17", isActive: false },
]// 更改数据
const setList1 = () => {// splice三个参数时 第一项是起始索引  第二项是长度  第三项是新插入的元素,可以有多个list1.splice(0,list1.length,...newList1)
}
</script>

三、使用 ref 来定义数据

复杂数据类型也可以使用ref进行定义,而且数据都是响应式的;原理就有点像第一种方式,重新包装了一层value;每次使用的时候都要写.value;

ref实际就是对一个普通值做了一层包装,包装成一个对象,并通过其get和set实现依赖收集和更新,其实现原理类似于computed;

<script setup>
import { reactive, ref } from "vue";
// 定义响应式
let list1 = ref([]);// 请求的数据
let newList1 = [{ name: "Eula", age: "18", isActive: false },{ name: "Umbra", age: "17", isActive: false },
]// 更改数据
const setList1 = () => {list1.value = newList1;
}
</script>

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

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

相关文章

【VS Code插件开发】通用功能(二)

&#x1f431; 个人主页&#xff1a;不叫猫先生&#xff0c;公众号&#xff1a;前端舵手 &#x1f64b;‍♂️ 作者简介&#xff1a;2022年度博客之星前端领域TOP 2&#xff0c;前端领域优质作者、阿里云专家博主&#xff0c;专注于前端各领域技术&#xff0c;共同学习共同进步…

word横向页面侧面页码设置及转pdf后横线变竖线的解决方案

在处理材料的时候&#xff0c;会遇到同一个文档里自某一页开始&#xff0c;页面布局是横向的&#xff0c;这时候页码要设置在侧面&#xff0c;方法是双击页脚&#xff0c;然后在word工具栏上选择“插入”——>“文本框”——>“绘制竖版文本框”&#xff0c;然后在页面左…

Python-OpenCV中的图像处理-几何变换

Python-OpenCV中的图像处理-几何变换 几何变换图像缩放图像平移图像旋转仿射变换透视变换 几何变换 对图像进行各种几个变换&#xff0c;例如移动&#xff0c;旋转&#xff0c;仿射变换等。 图像缩放 cv2.resize() cv2.INTER_AREAv2.INTER_CUBICv2.INTER_LINEAR res cv2.r…

岩土工程仪器多通道振弦传感器信号转换器应用于桥梁安全监测

岩土工程仪器多通道振弦传感器信号转换器应用于桥梁安全监测 桥梁作为交通运输的重要节点&#xff0c;其安全性一直备受关注。不同于其他建筑物&#xff0c;桥梁所处的环境复杂多变&#xff0c;同时&#xff0c;其所需承受的负荷也相对较大&#xff0c;这就需要对桥梁的安全进…

北京多铁克FPGA笔试题目

1、使用D触发器来实现二分频 2、序列检测器&#xff0c;检测101&#xff0c;输出1&#xff0c;其余情况输出0 module Detect_101(input clk,input rst_n,input data, //输入的序列output reg flag_101 //检测到101序列的输出标志 );parameter S0 2d0;S1 2d1;S2 2d2;S4 …

2023-08-07 LeetCode每日一题(反转字符串)

2023-08-07每日一题 一、题目编号 344. 反转字符串二、题目链接 点击跳转到题目位置 三、题目描述 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间&#xff0c;你必须原地修改输入数组、…

将游戏坐标转化成屏幕鼠标坐标

将游戏坐标转化成屏幕鼠标坐标 思路说明&#xff1a;转化其实是取得两点的相对位置&#xff0c;例如将游戏人物移动到另外一个位置&#xff08;游戏人物初始位置坐标到目的位置坐标&#xff09;&#xff0c;鼠标需要移动到屏幕的某个位置。算出游戏的移动距离&#xff0c;游戏…

SpringBoot3文件管理

标签&#xff1a;上传.下载.Excel.导入.导出&#xff1b; 一、简介 在项目中&#xff0c;文件管理是常见的复杂功能&#xff1b; 首先文件的类型比较多样&#xff0c;处理起来比较复杂&#xff0c;其次文件涉及大量的IO操作&#xff0c;容易引发内存溢出&#xff1b; 不同的…

linux软件安装篇

文章目录 linux软件安装篇配置yum源访问nginx服务页面如何运行一个淘宝网在你的机器上修改nginx的首页 linux软件安装篇 linux是纯黑屏的 学习使用yum工具&#xff0c;安装应用程序 阿里云的yum仓库&#xff0c;https://developer.aliyun.com/mirror/ 阿里云非常丰富且强大…

redis的配置和使用、redis的数据结构以及缓存遇见的常见问题

目录 1.缓存 2.redis不仅仅可以做缓存&#xff0c;只不过说他的大部分场景&#xff0c;是做缓存。本地缓存重启后缓存里的东西就没有了&#xff0c;但是redis有。 3.redis有几个特性:查询快&#xff0c;但是是放到内存里的〈断电或者重启&#xff0c;数据就丢了)&#xff0c…

Vue组件化开发思想;Vue的全局组件;Vue的局部组件;Vue的开发模式和解析;Vue CLI安装和使用;Vue项目的创建方式–Vite

目录 1_Vue组件化开发思想1.1_认识组件化开发1.2_Vue的组件化1.3_注册组件的方式 2_Vue的全局组件3_Vue的局部组件4_Vue的开发模式和解析4.1_Vue的开发模式4.2_单文件的特点4.3_如何支持SFC4.4_VSCode对SFC文件的支持 5_Vue CLI安装和使用5.1_Vue CLI脚手架5.2_Vue CLI 安装和使…

基于react-native的简单消息确认框showModel

基于react-native的简单消息确认框showModel 效果示例图组件代码ShowModel/index.jsx使用案例device.js安装线性渐变色 效果示例图 组件代码ShowModel/index.jsx import React, {forwardRef, useImperativeHandle, useState} from react; import {View,Text,Modal,TouchableOp…

整合封装服务器模块设计实现

服务器模块&#xff0c;是对当前所实现的所有模块的⼀个整合&#xff0c;并进⾏服务器搭建的⼀个模块&#xff0c;最终封装实现出⼀个gobang_server的服务器模块类&#xff0c;向外提供搭建五⼦棋对战服务器的接⼝。通过实例化的对象可以简便的完成服务器的搭建。 服务器框架 …

DNS、ARP

目录 DNS以及它的用途 DNS的解析方式 DNS的查询方式 DNS使用TCP/UDP DNS劫持 常见的DNS劫持现象 DNS劫持与HTTP劫持的不同 处理DNS劫持 DNS缓存 DNS实现负载均衡 ARP以及他的工作原理 DNS以及它的用途 DNS是域名解析服务器&#xff0c;用来将域名解析成IP。DNS工作在…

金九银十面试题之《JUC》

&#x1f42e;&#x1f42e;&#x1f42e; 辛苦牛&#xff0c;掌握主流技术栈&#xff0c;包括前端后端&#xff0c;已经7年时间&#xff0c;曾在税务机关从事开发工作&#xff0c;目前在国企任职。希望通过自己的不断分享&#xff0c;可以帮助各位想或者已经走在这条路上的朋友…

Linux | Ubuntu18.04安装RTX 4060显卡驱动完整教程

文章目录 概述一、定义介绍二、操作教程(一)、前期准备1.进入终端界面2.关闭界面显示器3.禁用其他显卡驱动4.卸载残余显卡驱动5.下载驱动(二)、安装驱动1.给驱动程序赋予权限2.安装驱动3.检查结果(三)、后续问题1.黑屏问题概述 本节详细介绍了如何在ubuntu18系统安装4060显卡的…

pnpm的高级使用

我整理了一些pnpm的高级使用&#xff1a; 并行安装&#xff1a;pnpm通过并行安装依赖项来提高安装速度。默认情况下&#xff0c;它会使用计算机的最大线程数来并行安装依赖项。你也可以使用--recursive选项来并行安装所有子项目的依赖项。 冻结依赖&#xff1a;pnpm支持将依赖…

06微服务间的通信方式

一句话导读 微服务设计的一个挑战就是服务间的通信问题&#xff0c;服务间通信理论上可以归结为进程间通信&#xff0c;进程可以是同一个机器上的&#xff0c;也可以是不同机器的。服务可以使用同步请求响应机制通信&#xff0c;也可以使用异步的基于消息中间件间的通信机制。同…

【云原生|Kubernetes】14-DaemonSet资源控制器详解

【云原生|Kubernetes】14-DaemonSet资源控制器详解 文章目录 【云原生|Kubernetes】14-DaemonSet资源控制器详解简介典型用法DaemonSet语法规则Pod模板Pod 选择算符在选定的节点上运行 Pod DaemonSet的 Pods 是如何被调度的污点和容忍度DaemonSet更新和回滚DaemonSet更新策略执…

MySQL登录成功后密码修改

场景 最近想通过CLI登录一台远古MySQL&#xff0c;结果遇到CLI密码不对&#xff0c;但是&#xff0c;GUI程序之前自动记住密码能够正常登录使用。 思路 通过GUI方式登录&#xff0c;修改密码后&#xff0c;再让新密码生效后&#xff0c;重新使用CLI方式登录MySQL 解决 通过…