返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue3中给数组赋值丢失响应式的解决
  • 571
分享到

vue3中给数组赋值丢失响应式的解决

vue3给数组赋值vue3丢失响应式vue3赋值 2023-05-16 15:05:09 571人浏览 八月长安
摘要

目录vue3给数组赋值丢失响应式的解决Reactive响应式数据赋值问题总结Vue3给数组赋值丢失响应式的解决 由于vue3使用proxy,对于对象和数组都不能直接整个赋值。 只有

Vue3给数组赋值丢失响应式的解决

由于vue3使用proxy,对于对象和数组都不能直接整个赋值。

只有push或者根据索引遍历赋值才可以保留reactive数组的响应性

const arr = reactive([]);
 
const load = () => {
  const res = [2, 3, 4, 5]; //假设请求接口返回的数据
  // 方法1 失败,直接赋值丢失了响应性
  // arr = res;
  // 方法2 这样也是失败
  // arr.concat(res);
  // 方法3 可以,但是很麻烦
  res.forEach(e => {
    arr.push(e);
  });
  // 方法4 可以
  // arr.length = 0 // 清空原数组
  arr.push(...res)
}

或者

const state = reactive({
	arr: []
});
...
state.arr = res
...

或者

const state = ref([]);
...
state.value= res
...

例子

<template>
    <div class="content">
		...
        <Card title="content组件">
            <button @click.prevent="add">ADD</button>
            <button @click.prevent="pop">POP</button>
            <button @click.prevent="changeList">changeList</button>
            {{ list }}
            <ProInj></ProInj>
        </Card>
    </div>
</template>

<script setup lang="ts">
import { reactive, markRaw, ref, defineAsyncComponent, inject, Ref } from 'vue'
...
let flag = ref(true)

let list = inject<Ref<number[]>>('list',ref(reactive<number[]>([])))
// let list = inject<Ref<number[]>>('list', ref<number[]>([1, 2, 3]))
const add = () => list.push(list!.length + 1)
const pop = () => list.pop()

const changeList = () => {
    flag.value = !flag.value
    if (flag.value) {
        list.length = 0
        list.push(...[9, 5, 4, 1])
    }
    else {
        list.length = 0
        list.push(...[6, 6, 6, 6, 6])
    }
}
...
</script>

<style lang="less" scoped>
...
</style>

效果图:

reactive响应式数据赋值丢失响应式问题

reactive响应式数据赋值问题

const  list = reactive({})

当你接收到接口数据,不要直接赋值 比如 list = data

这样会丢失响应式!

你可以这样做:

    const  list = reactive({
    arr:[]
})

list.arr = data.arr

或者

将list声明为ref方式

const list = ref([])
list.value = data

这样也不会丢失响应式

原因:reactive声明的响应式对象被list代理  操作代理对象需要有代理对象的前缀,直接覆盖会丢失响应式 

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue3中给数组赋值丢失响应式的解决

本文链接: https://www.lsjlt.com/news/210213.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue3中给数组赋值丢失响应式的解决
    目录vue3给数组赋值丢失响应式的解决reactive响应式数据赋值问题总结vue3给数组赋值丢失响应式的解决 由于vue3使用proxy,对于对象和数组都不能直接整个赋值。 只有...
    99+
    2023-05-16
    vue3给数组赋值 vue3丢失响应式 vue3赋值
  • vue3原始值响应丢失如何解决
    今天小编给大家分享一下vue3原始值响应丢失如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。一、ref 的引入ref ...
    99+
    2023-07-06
  • Vue3中reactive丢失响应式问题怎么解决
    本篇内容主要讲解“Vue3中reactive丢失响应式问题怎么解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue3中reactive丢失响应式问题怎么解决”吧!问题描述:使用 reacti...
    99+
    2023-07-05
  • vue3结构赋值失去响应式引发的问题怎么解决
    这篇文章主要介绍“vue3结构赋值失去响应式引发的问题怎么解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue3结构赋值失去响应式引发的问题怎么解决”文章能帮助大家解决问题。原始值的响应式系统的...
    99+
    2023-07-02
  • vue3原始值响应方案及响应丢失问题怎么解决
    一、ref 的引入ref 就是解决 proxy 无法直接代理原始值的问题。我们先来看 ref 的使用:const name = ref('小黑子')ref 是怎么实现的呢?其实就是用对象“包裹”原始值。我们再来看一下 ref...
    99+
    2023-05-14
    Vue3
  • vue3解构赋值失去响应式引发的问题思考
    目录前言原始值的响应式系统的实现为什么ES6 解构,不能随意使用会破坏他的响应式特性proxy背景实现原理解构 props 对象,因为它会失去响应式直接赋值rea...
    99+
    2024-04-02
  • vue3原始值响应方案及响应丢失问题解读
    目录前言一、ref 的引入二、isref 的实现三、响应丢失1、toRef登场2、toRefs 加入3、诡异的其它响应式丢失情况四、unref 自动脱 ref   ...
    99+
    2023-05-16
    vue3原始值响应 vue3响应丢失 vue3响应
  • vue3中defineProps传值使用ref响应式失效详解
    子组件接收父组件的传参。 父组件: <template> <Son :data="data"/> </template> <script ...
    99+
    2024-04-02
  • vb不能给数组赋值如何解决
    在VB中,给数组赋值有多种方式。以下是一些常见的方法:1. 使用For循环逐个赋值数组元素:```vbDim arr(5) As I...
    99+
    2023-09-16
    vb
  • java中给数组赋值的方法
    数组操作中,可以使用等于(=)赋值注意:此时新数组只是指向原数组的存储空间,并没有重新申请新的空间。实例:public class ArrayTest{ public static void main(String args[]){ ...
    99+
    2016-12-26
    java 数组 赋值
  • Vue3 ref构建响应式变量失效如何解决
    const title = ref("Hello, Vue 3!");ref 接收参数并将其包裹在一个带有 value 属性的对象中返回,然后可以使用该属性访问或更改响应式变量的值,比如上面的代码我们使用 count.v...
    99+
    2023-05-14
    Vue3 ref
  • Vue3 ref构建响应式变量失效怎么解决
    这篇“Vue3 ref构建响应式变量失效怎么解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue3 ...
    99+
    2023-07-06
  • java中给数组赋值的方法有哪些
    直接赋值arr[0]=1; 0代表的是数组的第1个元素 ,元素下标为0 arr[1]=1; 1代表的是数组的第2个元素 ,元素下标为1使用for循环赋值 int[ ] arr=new int[5]; for...
    99+
    2017-02-02
    java 数组 赋值 方法
  • PHP如何把数组中的值赋给一组变量
    这篇文章将为大家详细讲解有关PHP如何把数组中的值赋给一组变量,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。PHP 如何将数组中的值赋给一组变量 在 PHP 中,可以使用 list() 函数将数组中的值赋...
    99+
    2024-04-02
  • java中数值范围的精度丢失如何解决
    java中数值范围的精度丢失如何解决?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1.java中int,float,long,double取值范围public class Te...
    99+
    2023-05-31
    java ava
  • Vue组件传值过程中丢失数据的分析与解决方案
    前言 在上一篇文章 JavaScript 中的两种数据类型中,分别介绍了基本类型和引用类型,以及引用类型的浅拷贝与深拷贝。这里需要注意的是,该文章中深拷贝引用类型值的方法,并不是完美...
    99+
    2024-04-02
  • vue3中reactive不能直接赋值的解决方案
    目录vue3 reactive不能直接赋值方法vue3 reactive赋值不响应(1)多嵌套一层(2)使用ref(3)用obeject.assignvue3 reactive不能直...
    99+
    2024-04-02
  • c语言中怎么把数组的值赋给指针
    在C语言中,可以通过以下两种方式将数组的值赋给指针: 使用数组名作为指针: int arr[] = {1, 2, 3, 4, 5...
    99+
    2023-10-25
    c语言
  • 分析和解决 Golang 中数值精度丢失的问题
    Golang 精度丢失问题分析与解决方法 在使用 Golang 编程语言进行数学运算时,一些情况下会遇到精度丢失的问题。这种问题通常发生在浮点数运算中,特别是涉及到大数值、小数值或者需...
    99+
    2024-02-24
    golang 解决方法 精度问题 标准库
  • Java中数组赋值的方式有哪些
    Java中数组赋值的方式有以下几种:1. 直接赋值:可以使用大括号将元素列表括起来,用逗号分隔每个元素,并将整个列表赋给数组。例如:...
    99+
    2023-08-29
    Java
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作