vue3监听不到数组变化

项目场景:

最近在学习vue,在写的时候遇到一个问题,对数组进行了监听,但是监听不到。

问题描述

数组变化监听不到
在这里插入图片描述

原因分析:

刚学vue,对vue理解并不深,只从解决问题角度出发。
百度说有两种情况监听不到
利用索引直接设置数组项时,例如arr[indexofitem]=newValue
修改数组的长度时,例如arr.length=newLength
都和我不太符合。
改变数组的地方如下。
在这里插入图片描述

解决方案:

找了很久一直没找到哪里出了问题,最后改成了深度监听能监测到了
在这里插入图片描述

改成深度监听之后无论是这样改数组在这里插入图片描述还是
在这里插入图片描述
都能够监听到。个中原因之后再深入探究吧。继续学习。

关注vx公众号【技术员小刘】,2023希望一起进步。
每天进步一点点。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3,可以通过使用`watch`函数来监听数组变化Vue3的`watch`函数可以接收两个参数,第一个参数是要监听的数据,第二个参数是回调函数,当数据发生变化时会触发该回调函数。对于数组监听,可以使用`watch`函数的`deep`选项来进行深度监听,以便捕捉到数组变化。例如: ```javascript let arr = ref(\[\]); // 定义一个响应式的数组 watch(arr, (value) => { console.log('数组发生变化', value); }, { deep: true }); ``` 在上述代码,我们使用`ref`函数将数组转换为响应式数据,然后使用`watch`函数监听数组变化。当数组发生变化时,回调函数会被触发,并打印出数组的新值。通过设置`deep`选项为`true`,可以实现对数组的深度监听。这样,无论是通过赋值、splice方法还是push方法改变数组,都能够被监听到。 需要注意的是,在Vue3监听数组变化需要使用`ref`函数将数组转换为响应式数据,而不是直接使用普通的数组。这样才能确保数组变化能够被Vue3监听到。 #### 引用[.reference_title] - *1* [Vue3为何使用Proxy实现数据监听](https://blog.csdn.net/Gary_888/article/details/125860568)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [vue3监听变量(包括对象、数组的特殊用法)](https://blog.csdn.net/qq_39157025/article/details/131048908)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

脆皮瞎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值