vue3 ref 响应式数据赋值的问题，控制台打印更新，但页面未更新

安阳安阳－

已于 2023-11-30 16:28:56 修改

阅读量6.9k

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-10-12 10:56:29 首次发布

本文链接：https://blog.csdn.net/weixin_45578532/article/details/133785684

版权

困扰问题：初步学习vue3，普通的数组对象赋值给ref响应式数组对象，第一遍正常，第二遍控制台打印有数据但是页面没回显。

场景：

将ref数组对象和公共列表(是let的一个几百条数据的数组对象) 中他们name相同的数据，在ref的数组对象里删除该对象。let了一个listOtTableData = []; 处理完逻辑之后赋值第一次正常删除页面显示正常，第二次删除正常，控制条打印xx.value显示正常页面没反应。

截图如下

百度、chatgpt XXXX一顿查，相关概念表明直接重新赋值丢失响应式是因为引用地址变了。

尝试解决方案1：我就尝试xx.value = reactive(listOtTableData); 将数组对象变为响应式赋值给它，结论也是不可以。

尝试解决方案2（toRefs理解不透彻）：利用toRefs返回一个和参数一致的普通对象，只不过属性的值都变成了ref对象，结论也是不行。

尝试解决方案3：将最终处理好的数组对象用扩展运算符赋值给xx.value，结论正确！

由于刚学习vue3，刚开始reactive就遇到过一次这样回显不到页面上的场景，但是换成ref后就可以了。我还是不理解得地方太多，各位大佬如果有其他解决方案或者对文章有指点请留言，多指教

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

安阳安阳－

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue对象赋值视图不更新问题及解决方法

01-19

当我们需要对vue里面data数据做动态更新。如下，实例化了Vue对象，其下vueData为data属性指向，现在我们需要由后台装载完整的data对象现在我们需要装载更新完整的data对象，常规的赋值方式并不会引起视图的更新，双向绑定会失效。如上图中默认broker_list为空对象，装载完之后broker_list 包含新项（ZY98）解决办法： $.each(clientData, function (k, v) { Vue.set(vueData,k,Object.assign({}, v)); }); clientData 为外部初始化的数据。 Object.a

2023.3.22 Vue 数据更新了但页面没有更新的情况

小龙跳动的博客

03-22

4678

具体的场景不一样，解决问题的方法也不一样。这一句引起的，因为触发了setter，所以单看上述例子，具有响应式特性的数据只有message这一层，它的动态添加的属性是不具备的。那是因为Vue.js的DOM更新是异步的，即当setter操作发生后，指令并不会立马更新，指令的更新操作会有一个延迟，当指令更新执行的时候，此时text属性已经赋值，所以指令更新模板时，得到的是新值。一开始，我们在data对象中，只是声明了一个message空对象，并不具有text属性，所以该text属性是不具有响应式特性的。

参与评论您还未登录，请先登录后发表或查看评论

vue给数组赋值页面没有更新渲染（和别人的不一样）

最新发布

lotpyve的博客

07-19

1078

今天在项目中测试给我测出来了一个问题，但是我反复检查，感觉代码没有问题，但是页面就是不更新，最后我慢慢的尝试，找到了问题的解决方法，不过目前还不清楚为什么会出现这个问题。由于公司的代码我不能泄露，但是我重试复现，没出现那个问题，项目比较忙，我就不去细细琢磨了，以下代码 bug 没复现，只提供参考。解决方法：给渲染数组的那个标签外面在加一层div标签就可以了。

谈谈对vue响应式数据更新的误解

12-29

对于刚接触vue的同学会经常遇到数据更新了但是模板没有更新的问题，下面将结合vue的响应式特性以及异步更新机制分析常见的错误：异步更新带来的数据响应式误解异步数据的处理基本是一定会遇到的，处理不好就会遇到数据不更新的问题，但有一种情况是在未正确处理的情况下也能正常更新，这就会造成一种误解，详情如下所示：模板 <div id=app> <h2>{{dataObj.text}}</h2> </div> js new Vue({ el: '#app', data: { dataObj: {} }, ready

Vue项目中数组和对象更改后视图不刷新的问题

一捆铁树枝的博客

07-03

1469

Vue数据响应原理官方解释如下：当你把一个普通的 JavaScript 对象传入 Vue 实例作为data选项，Vue 将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因...

vue中对象属性赋值后，页面不更新解决方案

天蚕土豆丝的博客

08-04

1万+

vue属性值变化后，页面不更新解决方法

Vue3 ref数组对象更新不及时一种解决办法

m0_69564069的博客

05-16

1902

在用vue3使用ref 时，有时遇到数组更新不及时的情况。可以通过使用展开操作符赋值新的数组实例解决

解决 Vue 3 数据更新但是页面没更新的问题

Lovely Ruby 的手账

03-11

2716

列表的数据已经变了，但是页面没变。

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

qq_43886365的博客

08-09

1万+

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

VUE3使用reactive，ref时后端返回数据，数据更新Dom不更新

weixin_52901482的博客

07-21

2036

从后端拿到数据，控制台也能打印出数据，但页面没有更新。 VUE3使用reactive，ref时后端返回数据页面没有更新 reactive ref

解决在vue3中使用reactive响应式，赋值后造成页面不改变的问题？

范德萨的博客

03-16

5156

主要的问题就是使用reactive生成的响应式数据，在直接赋值时把响应式数据给替换为了普通数据了，导致无法监听数据的变化。

vue中的数据或对象直接赋值数据未更改的问题记录

szl199107101035的博客

05-06

2894

问题：在父组件中创建了一个数组对象，子组件通过props引入。当父组件的数据更改后，子组件未触发更新，导致数据还是旧的。代码如下 //此处的rightList是子组件，rightTicketList是传给子组件的数组对象 <rightList ref="rightTicketList" :right-ticket-list="rightTicketList" @deleteList="deleteList" @openRealNam

vue3解读—reactivity响应式实现

小王的技术库

06-21

1619

前言：Vue3 中引入了进行数据劫持，而是响应式系统的核心，而响应式系统又是中的核心，所以vue3的解读要从开始讲起。目前vue3的各个模块都可以单独安装，首先我们需要安装，从中引入我们需要的方法，下面是我简单写一段测试代码。先别急着看我的输出，想想自己心中的答案是什么？下面公布控制台的实际输出：总结：我们会发现函数执行了两次，一次是我们往函数传入匿名函数时，它立即执行了一次；接下来是我们对响应式变量进行重新赋值时（或者说内函数所依赖的响应式变量发生变化时）它又执行了一次。接下来我们就好好思考下，

学习笔记11（vue3响应式实现）

weixin_41837346的博客

11-19

313

目录Vue3 如何追踪变化？es6 Proxy参考链接 Vue3 如何追踪变化？ es6 Proxy 定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）使用 new Proxy(target, handler) 劫持对象访问可以劫持任何属性的访问，Object.defineProperty 只能固定属性 // chrome 控制台测试 const dinner = { meal: 'tacos' } const handler = { get(target, prop) {

Vue3项目创建及reactive与ref、isRef、toRefs、shallowReactive的作用

qq_37635012的博客

10-08

681

vue3项目创建、vue3项目搭建流程、vue3里ref使用、vue3里reactive使用。

VUE3学习第九章 webpack 构建Vue3项目、vue3性能优化、Vue3 Web Components、Vue3 响应式原理

m0_55170432的博客

11-14

1095

学习

vue项目中数据更新页面不刷新问题

热门推荐

qq_41538952的博客

06-24

2万+

这种情况可以分为很多种.但是究其原因就是vue3.0以下版本无法监听对象（包括数组以及对象）的变化，当数据发生变化的时候vue的刷新机制是监听不到数据变化的，所以需要我们在实际应用过程中通过各种处理来达到页面刷新的目的。 1.这是一种简单粗暴的解决方案吧,那就是在数据更新完成之后对页面进行重排和重绘操纵,但是这种方式对页面的消耗会急剧上升,不到万不得已还是不要使用的好，具体实现方法如下: 在data中定义一个阈值,比如show，初始为true; 代码实现： this.show = false; s

Vue中对象或数组数据更新但视图不刷新问题的解决策略

在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。

11-13

9818

在vue中，数据的绑定都不用我们操心，例如在data中有一个 msg 的变量，你修改它，那么在页面上，msg 的内容就会自动发生变化。但是如果对于一个复杂的对象，例如一个对象数组，你直接去给数组上某一个元素增加属性，或者直接把数组的 length 变成0，vue就无法知道发生了改变。

ref 和 reactive、reactive数据更新页面没有刷新问题

天涯尽头的拾荒者的博客

10-09

3494

ref 和 reactive 用法、页面不更新问题

vue3代码父组件获取子组件

09-09

在 Vue 3 中，你可以使用 `ref` 和 `props` 来实现父组件获取子组件。首先，在子组件中，你需要将希望父组件获取的数据通过 `props` 进行传递。例如，假设你想获取子组件的一个名为 `childData` 的属性，可以将其定义为子组件的 `props`： ```vue <template> <div>  </div> </template> <script> export default { props: { childData: { type: String, // 根据实际情况，修改数据类型 required: true // 根据实际情况，修改是否必需 } }, // ... } </script> ``` 然后，在父组件中，你可以通过使用 `ref` 来引用子组件，并使用 `.value` 来访问子组件传递的数据。例如： ```vue <template> <div>  <child-component ref="child"></child-component> <button @click="getChildData">获取子组件数据</button> </div> </template> <script> import { ref } from "vue"; export default { components: { ChildComponent }, setup() { const childComponentRef = ref(null); // 创建一个 ref const getChildData = () => { const childData = childComponentRef.value.childData; console.log(childData); // 在控制台输出子组件的数据 }; return { childComponentRef, getChildData } } } </script> ``` 在上述代码中，我们通过 `ref` 创建了一个 `childComponentRef`，然后将其赋值给子组件的 `ref` 属性。在 `getChildData` 方法中，我们通过 `childComponentRef.value.childData` 来访问子组件的数据。这样，父组件就可以获取到子组件传递过来的数据了。当然，你还可以根据实际需求进行修改和适配。希望能帮到你！