Vue数组踩坑日记props对象里面的部分数组改变无法重新渲染，视图没有根据数据变化。

最新推荐文章于 2024-05-20 12:56:55 发布
最新推荐文章于 2024-05-20 12:56:55 发布
阅读量8.8k 收藏 8
点赞数 7
分类专栏： Vue 文章标签： Vue踩坑日记 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35189120/article/details/83114510
版权

首先声明一个组件然后往组件里面丢对象
在这里插入图片描述；
html是在渲染以后修改数组
在这里插入图片描述
js代码更改对象中的数组
在这里插入图片描述；
**

  1. vue有说明在数组直接通下标改变是不会被观察到的所以我试了(vue.set但是我并不是通过下标改变而是直接改变整个组数所以一样没用）**

2. 然后我又试试了强制更新this.$forceUpdate()这个倒是生效

  1. 后面我又尝试使用push来试试结果一样失败了。
    但是具体为什么还是没找到原因，后面去观察了一下两个数组再赋值前是不是有什么不同，真的发现了不同，一个数组里面带了Observer这种可以正常被观察到，并且重新渲染在这里插入图片描述

而另外一种不带Observer属性的是无法被观察到的
在这里插入图片描述
；

这个是因为父组件根本没有这个属性 zbyaoqiu

！是我这个按钮在被我点击的时候才设置的属性，本属性属于组件自己，因为组件的特性改变组件自己的属性并不会影响到父组件。所以只要在父组件创建的生命周期cerated设置属性就可以了

看到这么多人访问这个应该和我一样是最常见的bug那我再补充一些。如果数据变了视图没刷新可能是因为以下问题

  1. 数据操作没有用vue的方法所以视图无法刷新 使用Vue.set Vue.delete 即可解决
  2. 视图有缓存导致页面没有刷新 这个问题说来话长 解决方法就是给元素加个唯一key <div :key='id'>hello world<div>
  3. 强制刷新视图函数 this.$forceUpdate() （这个方法不推荐，主要是 1-2引起的，如果是1引起的使用这个方法无效 2引起的有效）
  4. 还有就是自己操作不当，如同本文父子组件通信中在子组件里面新增了数组父亲当然不知道
危险游戏i
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue 路由变化页面数据不刷新的问题
08-27
默认情况下，Vue Router会监听路由的变化，并尝试重新渲染组件以反映这些变化。然而，如果数据不是通过`props`传递或者在`data`选项中声明的，那么Vue可能不会自动获取或刷新数据。 问题描述： 在一个帮助页面，...
Vue强制组件重新渲染的方法讨论
10-15
对于那些 Vue 无法检测到的数组或对象的变化，可以使用 `Vue.set` 或组件实例上的 `this.$set` 来添加新的属性或修改现有属性，从而触发响应式更新。 总结来说，虽然 Vue 提供了多种强制组件重新渲染的方法，但...
vue子组件更新数据 界面没有渲染
weixin_35757531的博客
01-03 1043
如果 vue 子组件数据发生更新，但界面没有渲染，可能是因为您没有正确地使用数据绑定。 在 vue 中，当组件的数据发生变化时，界面会自动更新。要在组件中绑定数据，您需要使用花括号把变量名括起来，例如： <template> <div>{{ message }}</div> </template> <script> export d...
【vue】prop更新，子组件不重新渲染的解决方法
qq_34838046的博客
09-26 5243
1.添加prop的侦听器 props:['xxx'], data(){ return{ yyy } } ... watch:{ xxx:function(newValue){ this.yyy=xxx } }
vue prop改变，子组件更新和重新渲染
最新发布
无心使然云中漫步
05-20 1020
对于场景2，当在父组件中，改变传递给子组件的参数，子组件的props会跟着改变，但是mounted生命周期函数不会再次调用，所以不会发送请求，子组件显示的依然是老数据。如果子组件中的数据只有部分是请求接口返回的数据，可以选择重新渲染子组件，也可以更新子组件中部分数据。对于场景1，当在父组件中，改变传递给子组件的参数，子组件的props会跟着改变，所以子组件会更新。2.1 给子组件加ref,父组件通过ref调用子组件中的请求后端数据的方法。如果子组件中的数据仅仅是请求接口返回的数据，可以选择重新渲染子组件。
Vue3数组更新问题和props的正确使用
魔鬼的归宿
04-27 2751
数组更新可以用splice，重点是子组件里面是否是响应式的
vue2中为什么修改数据不重新渲染？
用户什么都没有写。
07-24 933
组件状态没有定义成响应式的数据？？更改时不会更新视图？？
解决vue数组更新前台不渲染问题两种方式
qq_39419395的博客
11-10 777
目标解决VUe数组刷新前台不渲染方式： 方式1： 使用如下的方式，调用全局的set方法，使其vue相应； this.$set(this.conditionFieldList[index],"source","none") 方式2： 给定table增加 :key="conditionsKey" 属性；每次调用方法时，使用 conditionsKey++ 强制渲染。 例如: 如下 conditionsKey 使用 <a-table bordered :r...
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
10-15
这可能是由于ECharts没有正确地检测到数据变化，或者Vue的生命周期钩子没有正确触发ECharts的重新渲染。 2. **解决办法**： - 首先，我们需要明白，Vue的`updated()`生命周期钩子并不总是确保ECharts会重新绘制。...
浅谈vue的props，data，computed变化对组件更新的影响
08-28
在 Vue 中，数据对象的所有属性都是响应式的，这意味着当这些属性的值发生变化时，视图会自动更新。例如，`parentData` 是 `Parent` 组件的 `data`，通过 `changeParentData` 方法修改 `parentData` 的值会导致视图...
基于ztree封装的Vue树形组件，轻松实现海量数据的高性能渲染.zip
04-03
1. 数据驱动：遵循Vue的声明式编程风格，通过props传递数据，自动更新视图。 2. 可配置性：允许开发者自定义节点的样式、图标、展开/折叠行为等。 3. 事件处理：提供丰富的事件回调，如点击、双击、拖拽等，方便业务...
vue父组件给子组件传值，子组件不渲染的原因及解决方法
预见的力量
01-05 2715
父组件传递给子组件的数据，如果是一个复杂对象（例如一个数组或对象），那么子组件只会监听对象的引用而不是对象的内容。这意味着当对象的内容发生变化时，子组件不会更新。3、数据发生变化后，在下面调用一下splice方法修改原数组长度（索引、截取长度都为0），数组不变，但视图可成功渲染。1、在子组件使用 watch 监听 props传过来的值，如果发现改变，调用forceUpdate刷新视图。2、父组件中声明一个布尔变量，数据发生变化后，切换一下变量状态，可刷新子组件视图。
vue开发过程中，修改了数据，但是页面死活不渲染改变！没变化！怎么办？6种方法解决~
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-05 1万+
通常是某个渲染的数组改变了层级较深的数据导致页面没有实时渲染就这么写 this.items=JSON.parse(JSON.stringify(this.items));
vue组件模板使用v-for无法渲染的问题
qq_41756580的博客
09-29 5991
最近在做项目的过程中遇到一个问题，我们创建自己的组件时，父组件传给子组件一个数组，子组件使用v-for指令无法渲染，以下是错误代码： Vue.component('component-test',{ props: { testData: { type: Array, default: [] } }, templat...
vue中数组改变不渲染页面问题处理，解决办法使用splice
qq_41183828的博客
10-11 2795
语法结构：splice(index,len,[item]) 1、可以用来添加/删除/替换数组内某一个或者几个值 2、该方法会改变原始数组 index:数组开始下标 len: 替换/删除的长度 item:替换的值，删除操作的话 item为空 1.修改 相当于先删除再添加 methods:{ clickModify:function () { this.arr.splice(0,1,item);
vue中父子组件通过props传递数据，父组件数据ajax异步更新，子组件不动态更新的解决方案
热门推荐
weixin_38728902的博客
04-29 1万+
近期在开发中遇到一个问题，把项目中评分星星剥离出来抽象为一个子组件，页面中也用后发现：如果是通过v-for渲染的列表，数据可以正常通过props传递到子组件并渲染加载，但是如果是异步加载获取到的数据能正常传到子组件中，但是不会重新渲染加载。 异步加载获得的数据传递给子组件通过v-for渲染的数据传递给子组件查了一些网友的帖子后发现，只要在子组件中加侦听器watch监听props中值的变化，并在值...
Vue3深入组件Props
性感码农在线写笔记
02-01 2762
vue3深入组件props
vue3 监听props 的变化
qq_41304029的博客
08-29 6922
我觉得props 会创建对应的属性，去接受这些值，比如传递一个ref的基本值 age传递一个ref的引用值 person传递一个reactive的引用值 person最开始时候，props指向了一个响应式的reactive person，如果我们手动将person = {} 整个替换掉，是不影响原来指向的值的（setup只在初始化时执行一次，所有一开始props指向的是一个响应式的person，而当前改变的person 并不影响，props当中的person 所以也无法监听）
[vue] prop更新不及时问题 不是最新的
qq_14993591的博客
01-19 1271
当我点击父组件的按钮时，发请求获取了数据并赋值给了info数组，点击事件代码在下面（解决修改代码过程）子组件：通过props接收了父组件传过来的数组；它后一个方法，获取最新的数组值。父组件：通过props向子组件传递了一个数组info。
vue父子组件之间传一个数组，子组件收到赋给对象中的一个数组，并且触发table的视图更新
07-17
在Vue中，如果父组件要向子组件传递一个数组，并且子组件需要将其赋给对象中的一个数组，并触发表格（table）的视图更新，你可以使用props将数组传递给子组件，并在子组件中使用计算属性将其赋值给对象中的数组。同时，在子组件的模板中，使用v-for指令来渲染表格。 下面是一个示例，展示了父组件向子组件传递一个名为"list"的数组，并在子组件中将其赋给对象中的一个名为"tempList"的数组，并触发表格的视图更新： 父组件： ```vue <template> <div> <ChildComponent :list="parentList" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { data() { return { parentList: ['Apple', 'Banana', 'Orange'], }; }, components: { ChildComponent, }, }; </script> ``` 子组件： ```vue <template> <div> <table> <thead> <tr> <th>Item</th> </tr> </thead> <tbody> <tr v-for="item in tempList" :key="item"> <td>{{ item }}</td> </tr> </tbody> </table> </div> </template> <script> export default { props: ['list'], computed: { tempList() { return this.list; }, }, }; </script> ``` 在上述示例中，父组件通过`:list="parentList"`将"parentList"数组传递给子组件的props。子组件接收到这个数组后，使用计算属性(tempList)将其赋给对象中的数组。在子组件的模板中，我们使用`v-for`指令遍历"tempList"数组，并为每个数组项指定一个`key`，以确保在数组发生变化时可以正确地更新表格的视图。 请注意，父组件中的数组改变时，子组件的props也会相应地更新，因此子组件的计算属性(tempList)会重新计算，并触发表格的视图更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值