vue2中哪些操作不是响应式的(数据变了,视图没有更新)

已于 2022-07-18 23:24:43 修改
阅读量1.3k 收藏 3
点赞数 3
文章标签： vue.js 前端
于 2022-07-17 01:13:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qiemo_/article/details/125827484
版权

哪些情况

对象新增的属性没有响应式 (有一个对象,对象有个name和age,后续我新增xxx) 对象后续新增的key赋值

删除也不是响应式的,删除对象中某个属性

数组的部分操作没有响应式  通过索引修改数组内容

原因:

对象后续新增的key赋值,因为vue2通过Object.defineProperty去递归劫持的每一个属性,如果这些属性是后续新增的则不会被劫持到

通过索引修改数组内容, Object.defineProperty支持对数组的劫持,作者出于性能原因没有这样做

解决: this.$set,或者vue.set  删除解决方案this.$delete

vue3不会存在这些问题,proxy会代理整个对象,就无所谓这个属性是不是后续新增的了,对数组也不存在性能问题

 

Qiemoer
关注
浅谈 Vue2 数组对象新增属性，响应式失效问题
chenyajundd的博客
08-02 1684
Vue2 数组对象，动态添加对象属性，vue响应式失效，页面监听不到新增属性的变化。
vue的非响应式情况
tangren_wyx的博客
04-29 823
vue的非响应式情况 数组的下标 <div id="app"> <button @click = "change"> 点击 </button> <ul> <li v-for = ' (item,index) in list ' :key = 'index'> <p> {...
vue2 添加数据不是响应式的处理方法
html网页设计、web前后端网站制作、大学生网页设计作业、个人网站制作、jQuery网站设计、uniapp小程序、vue网站设计、node.js网站设计、网页成品模板、期末大作业，各种设计应有尽有，持续更新中...
01-31 948
vue2 添加数据不是响应式的处理方法
vue中哪些数组方法不是响应式的
imkaifan的博客
03-30 1535
何为数组的响应式 通过方法把数组中的元素改变了，页面上的视图也会更新。 响应式的方法 div id="app"> <div v-for="item in letters">{{item}}</div> <button @click="btnClick">按钮</button> </div> <script src="../js/vue.js"></script> <script>
vue解决非响应数据问题方法
m0_51073906的博客
07-20 869
在Vue官方文档中指出，$forceUpdate具有强制刷新的作用。 $forceUpdate() 那在vue框架中，如果data中有一个变量:age，修改他，页面会自动更新。 但如果data中的变量为数组或对象，我们直接去给某个对象或数组添加属性，页面是识别不到的 <template> <p>{{userInfo.name}}</p> <button @click="updateName">修改userInfo</button> &lt
Vue2中向页面额外添加数据和更改数组不触发响应式问题
Allurewuhui的博客
03-06 2008
新增属性、删除属性, 界面不会更新。 当想动态的向 data 中添加数据，例如调用一个方法，向已有对象中添加一个属性，想要实现响应式，需要调用 组件实例对象身上的 $set方法，或者调用 Vue 身上的 set 方法。 直接通过下标修改数组, 界面不会自动更新。 1.调用组件实例对象身上的 $set方法，或者调用 Vue 身上的 set 方法。 2.调用数组身上的方法进行修改 // 想使用Vue身上的方法需要先引入 import Vue from 'vue' // 动态更新数据--向已有对象中
解决vue中修改了数据但视图无法更新的情况
10-18
在Vue.js中，数据绑定是基于数据响应式的，这意味着当你修改数据时，视图通常会自动更新以反映这些变化。然而，在某些情况下，当你直接修改数组元素或对象属性时，Vue可能无法检测到这些变动，导致视图不会更新。...
稍微学一下Vue的数据响应式（Vue2及Vue3区别）
10-15
在Vue框架中，数据响应式是一项核心特性，它使得开发者无需直接操作DOM，只需更改数据，视图就会自动更新。本文将深入探讨Vue2和Vue3在数据响应式上的实现方式及其差异。 **数据响应式原理** 数据响应式的核心目标...
Vue3.0数据响应式原理详解
10-16
当响应式数据发生变化时，与之关联的`ReactiveEffect`会被调度执行，从而触发视图的更新。 4. **Dep和KeyToDepMap**: `Dep`是一个Set对象，用于存储所有依赖于某个响应式对象的`ReactiveEffect`。`KeyToDepMap`则是...
解决vue中对象属性改变视图不更新的问题
11-27
在Vue.js中，数据绑定是基于响应式系统的，这意味着当你修改数据时，视图会自动更新以反映这些变化。然而，对于对象来说，Vue.js只能监听到对象本身，而不是其属性。因此，当你直接添加、删除或修改对象的属性时，...
Object.assign()解决vue2中对象新增属性不是响应式问题的原理
总柴的博客
12-07 2016
将源对象和要加入属性的对象合并为一个新的对象赋值给要响应式的对象（源对象），vue会将源对象重新触发一遍Object.defineProperty依赖收集。
vue 的方法，计算属性，侦听器，非响应式的解决方法
Lyn2693282567的博客
07-04 716
vue 的方法，计算属性，侦听器，非响应式的解决方法
vue中数组不具有响应式,需要使用vue.$set()
qq_45894929的博客
12-07 1147
1.在掉完接口后在数组中的每一项添加三个属性 orderStatus(id){ this.api.orderListStatus ({order_id:id}).then(res=>{ this.datalist = res.order_detail this.goods_info = res.order_detail.goods_detail res.order_detail.goods_detail.map(item=>{ item['com
Vue中不需要响应式的数据该如何处理？
weixin_43144716的博客
04-24 1768
冻结对象,禁止对该对象的属性进行修改。这个方法返回传递的对象，而不是创建一个被冻结的副本。影响性能, 如第三方库, 定时器, 常量等。总结: 不需要响应式的数据务必不要挂在。3. 自定义Options。
深入了解vue2没有在data中定义的属性非响应式的问题
最新发布
yjy_191的博客
09-08 1035
vue2 响应式数据 是通过 es5 中的 Object.defineProperty 方法来实现，把 data 定义的所有属性，转换为 get/set 方法，使用 Object.defineProperty 方法劫持
vue中常用的响应式方法与非响应式方法
qq_46112274的博客
11-09 1375
<body> <div id="app"> <ul> <li v-for="item in letters" :key="item">{{item}}</li> </ul> <button @click="btnClick">按钮</button> </div> <script src="../js/vue.js"></scri
Vue非响应式情况
hryztt123的博客
10-25 1761
响应式系统：正确操作数据层（M层），视图层（V层）会发生变化，会响应。但是如果出现一些非法操作，M层发生变化，但V层不响应，下面我们就说说有哪几个情况 1. 对数组使用了非变异方法 修改了原数组：变异 没有修改原数据，而是返回了新数组：非变异 有哪些数组方法式非变异方法呢？ 有：arr.map() , arr.filter() , arr.slice() , arr.concat 2. 修改了数组的长度 3.修改了数组根索引上的值 ...
Vue中ECharts数据更新视图不更新的解决方法
解决Vue中ECharts数据更新但视图不更新的问题，关键在于正确地利用Vue的响应式系统，如`watch`，来监听数据变化并触发图表的重新渲染。通过这样的方式，可以确保ECharts图表在数据变更时保持与数据同步，提供良好的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值