Vue3 响应式 ref 在异步中.value 和直接输出值不同步问题

最新推荐文章于 2024-05-12 22:40:26 发布
最新推荐文章于 2024-05-12 22:40:26 发布
阅读量350 收藏 2
点赞数 13
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53126701/article/details/136906294
版权

先看问题

具体代码

在这个函数中我删除了一个角色的某一个权限功能，然后需要通过 roleListFetch()去重新获取最新的 roleList 的数据，roleList 是一个 ref 响应式数据，我直接打印这个 ref 数据和.value 打印数据会不一样

可以看出直接打印的 roleList 是最新的数据，已经把项目只读这个权限给删除掉了，而.value打印的数据不是最新的数据。这是不是很搞，我们需要拿 roleList 的数据一般都是通过.value 去操作这个数据（这个我也不知道是不是 vue3 的 bug 还是异步引起的问题）。

解决方案

通过 watch 监听去解决这个数据不同步的问题(这个问题我也是看了这位老哥的解决方案；vue3响应式ref console.log输出.value时数据为空直接输出则显示数据 前端异步问题_vue3 console.log-CSDN博客

代码如下：

有点小菜的小鬼程序员
关注
  • 13
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js中provide/inject实现响应式数据更新的方法示例
10-16
主要介绍了Vue.js中provide/inject实现响应式数据更新，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue3 响应式系统简单实现.zip
01-02
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者，能够帮助你快速上手Qt并掌握其高级特性。
vue.js中ref和$refs的使用及示例讲解
10-16
主要给大家介绍了关于vue.js中ref和$refs使用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue在index.html中引入静态文件不生效问题及解决方法
10-17
主要介绍了vue在index.html中引入静态文件不生效问题及解决方法，本文给大家分享两种原因分析，通过实例代码讲解的非常详细 ,需要的朋友可以参考下
vue3.x 响应式系统实现.zip
01-02
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者，能够帮助你快速上手Qt并掌握其高级特性。
vue3 组合式api ref使用详解，以及使用ref绑定dom时，ref.value为undifend的注意事项
dxh9231028的博客
06-27 4096
我们依旧使用ref函数定义一个变量，但其中并不包裹任何值，并且在我们想要获取的dom上，写上属性ref=“我们定义的这个变量”，那么这个dom就被保存进这个变量了，代码如下图我们也可以使用ref绑定子组件获取子组件实例，步骤一样，如下图但无论是绑定dom，还是绑定子组件实例我们一定要注意以下两点！！！！！！！！！！！！！！！！！！！！！！！！！！！
vue3响应式ref console.log输出.value时数据为空直接输出则显示数据 前端异步问题
qq_52790429的博客
10-11 1024
后面研究了一下应该和异步有关系，从这个字典获取到的数据是异步的，拿不到里面的数据！但是我搞不懂为啥打印的时候不带.value就可以打印出来。当我想对获取到的数据字典进行一些操作的时候发现我在setup语法糖里面没办法对这个数据进行相关的操作。后面用watch监听这个数据就可以打印出来。
vue3中对ref的理解
前端开发工程师博客
12-30 237
ref和reactive一样,也是用来实现响应式数据的方法由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦所以Vue3提供了ref方法实现简单值得监听。
vue3中ref 和 reactive的简单了解
Kobeloveu
01-06 1042
<script lang="ts" setup> import { ref, reactive } from "vue"; const num = ref(0); const obj1 = ref({ value: 1 }); const num2 = reactive(0) // 直接提示错误，建议Object 类型 const obj2 = reactive({ value: 1 }); console.log("num :>> ", num); // RefImpl{_sha
RefImpl 对象 .value时数据为空，直接输出则显示数据（vue3前端异步问题 ）
larea的博客
04-01 622
因为console.log打印对象的执行机制，当你在浏览器控制台点击对象，展开对象时，此时浏览器才会去对象所在的堆内存中获取数据,再经过浏览器编译，展示在控制台。控制台对象一旦打开后，就不再修改，其值就会存储在浏览器中，即使后面代码再次更新对象，也不会改变了。通过watch就可以打印出来了。通过.value打印出来是空。
浅析vue3中的声明响应式数据 ref 和 reactive
Quentin0823的博客
09-13 3256
在Vue2中响应式数据是通过defineProperty来实现的，而在Vue3响应式数据是通过ES6的Proxy来实现的。Vue3中实现响应式数据的方法是ref和reactive。使用方法：
Vue3 Ref 语法糖，告别 .value 的写法
五柳
09-16 6403
前言 近期，Vue3 提了一个 Ref Sugar 的 RFC，即 ref 语法糖，目前还处理实验性的（Experimental）阶段。在 RFC 的动机（Motivation）中，Evan You 介绍到在 Composition API 引入后，一个主要未解决的问题是 refs 和 reactive 对象的使用。而到处使用 .value 可能会很麻烦，如果在没使用类型系统的情况下，也会很容易错过： let count = ref(1) function add() { count.value++ }
vue3 el-form校验 报错formRef.value.validate is not a function
2301_76162638的博客
12-28 2335
在保存按钮中打印formRef.value.validate()是有值的，所以我给它们增加了。
vue3中的reactive和ref
weixin_43784341的博客
05-08 518
在Vue 3中，reactive和ref是两个常用的响应式API，用于创建响应式的数据。它们的主要区别在于reactive用于创建对象或数组的响应式引用，而ref用于创建单个值的响应式引用。下面我将分别介绍它们的详细用法，并提供代码示例。
【在线OJ】Vue创建OJ管理系统
qq_61903414的博客
05-07 269
vue ui命令创建项目项目创建完成后来到项目。
前端Vue架构
最新发布
weixin_45678402的博客
05-12 129
defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）这样写的话，依赖收集只能收集到属性c；如果访问的属性值还是一个对象，对属性值再次进行代理；创建视图的函数（render）和数据之间的关联；当数据发生变化的时候，希望render重新执行；下面的用法，只能收集到c，收集不到c1。依赖收集：a color: #f00。依赖收集：a color: #f00。如何知晓数据对应的函数；监听数据的读取和修改；
vue3自定义拖拽指令
weixin_43641912的博客
05-09 261
自定义拖拽指令: 鼠标位置相对于当前文档的x坐标 - 鼠标位置相对于当前物体的x坐标 就是 物体在文档中的位置。
vue3中ref变量失去响应
09-12
你好，关于Vue 3中ref变量失去响应的问题，可能有几个原因导致。 首先，确保你在组件中正确地使用了ref。Vue 3中，你可以使用`ref`函数来创建一个响应式的变量。例如： ```javascript import { ref } from 'vue'; const myRef = ref('initial value'); // 在模板中使用myRef ``` 其次，如果你在组件中使用了ref，但是没有在模板中使用它，那么它不会被自动追踪。确保在模板中使用ref变量，这样Vue才能跟踪变量的变化并进行响应更新。 另外，如果你在ref变量之后进行了异步操作，可能会导致失去响应。这是因为Vue 3中的响应式系统对于异步操作的跟踪能力有限。如果你在异步操作之后发现ref变量没有更新，请考虑使用`watchEffect`或`watch`函数来手动监视变量的变化。 最后，如果以上方法都没有解决问题，可能是由于其他因素导致的。这时你可以检查Vue的版本，以及是否有其他插件或代码干扰了响应式系统的正常运行。 希望这些提示能帮助你解决问题！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值