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

已于 2022-07-18 23:24:43 修改
阅读量1.2k 收藏 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
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈 Vue2 数组对象新增属性，响应式失效问题
chenyajundd的博客
08-02 1365
Vue2 数组对象，动态添加对象属性，vue响应式失效，页面监听不到新增属性的变化。
从JavaScript属性描述器剖析Vue.js响应式视图
02-25
JavaScript的对象，是一组键值对的集合，可以拥有任意数量的唯一键，键可以是字符串（String）类型或标记（Symbol，ES6新增的基本数据类型）类型，每个键对应一个值，值可以是任意类型的任意值。对于对象内的属性，...
Vue实现双向绑定的原理以及响应式数据的方法
12-12
一、vue中的响应式属性 Vue中的数据实现响应式绑定 1、对象实现响应式： 是在初始化的时候利用definePrototype的定义set和get过滤器，在进行组件模板编译时实现water的监听搜集依赖项，当数据发生变化时在set中通过调用dep.notify进行发布通知，实现视图的更新。 2、数组实现响应式： 对于数组则是通过继承重写数组的方法splice、pop、push、shift、unshift、sort、reverse、等可以修改原数组的方式实现响应式的，但是通过length以及直接利用item[index]方式修改数组是不能实现响应式的改变dom（这种两种方式涉及到数组的内部实现
解决vue2响应式失效问题的方案总结
蓝with黑的博客
09-18 2618
在 Vue3 中，这个问题已经得到了较好的解决，因为 Vue3 使用了 Proxy 来实现更强大的响应式系统，可以自动追踪对象内部的变化，不再需要使用JSON.parse(JSON.stringify())这样的技巧来维护响应式关系。这个原理的关键在于，JSON.stringify()方法会将一个对象转换成一个 JSON 字符串，而JSON.parse()方法则会将这个 JSON 字符串解析成一个新的 JavaScript 对象。拷贝一个新对象，让vue重新建立新的响应式关系。，从而使它关联组件重新渲染。
vue给对象添加属性，无法与视图响应（已解决）
大前端
10-11 1512
问题：vue中，给data中的某个对象添加属性，无法与页面响应 解决方法： 方法一：直接在对象中写上属性 data() { return { //错误写法 //handle_form: {}, //正确写法 handle_form: { ruleName: '' }, } } 方法二：通过$set赋值 //错误写法 this.handle_form.rule
【Vue2】v-if 绑定的数组或对象属性变化不响应问题解决详解
NineWaited的博客
08-10 4412
具体内容与双向绑定、$set()方法相关。整体内容过长，如果想参考最终解决，直接跳到总结即可；如果想要看一下实际情况，可以耐心浏览。
vue的非响应式情况
tangren_wyx的博客
04-29 763
vue的非响应式情况 数组的下标 <div id="app"> <button @click = "change"> 点击 </button> <ul> <li v-for = ' (item,index) in list ' :key = 'index'> <p> {...
Vue的响应式数据与非响应式数据及原理
MR.杜的博客
06-17 3432
1.直接在vm实例对象上添加属性 2.列表渲染通过下标更改列表中的值需求:点击按钮更改列表中的第0号元素 这种情况数据其实已经改变了,但是视图没变 解决方法: Vue.set || this.$set 那么Vue数据响应式是如何实现的呢?实现数据的双向绑定有几个重要的部分: 数据代理原理: 2.数据劫持 => 实现数据双向绑定 3.模板解析 三.扩展 v-model实现数据双向绑定的本质...
vue2 添加数据不是响应式的处理方法
半兽先生的博客
01-31 752
vue2 添加数据不是响应式的处理方法
深入了解vue2没有在data中定义的属性非响应式的问题
yjy_191的博客
09-08 723
vue2 响应式数据 是通过 es5 中的 Object.defineProperty 方法来实现，把 data 定义的所有属性，转换为 get/set 方法，使用 Object.defineProperty 方法劫持
vue实际运用五：不需要响应式的数据的处理
GTbond的博客
12-23 5549
不需要响应式的数据的处理 在我们的Vue开发中，会有一些数据，从始至终都未曾改变过，这种死数据，既然不改变，那也就不需要对他做响应式处理了，不然只会做一些无用功消耗性能，比如一些写死的下拉框，写死的表格数据，这些数据量大的死数据，如果都进行响应式处理，那会消耗大量性能。 // 方法一：将数据定义在data之外 data () { this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx } this.list2 = { xxxxxxxxxxxxxxxx
Vue.set()动态的新增与修改数据,触发视图更新的方法
01-19
用法：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。 例： data:{ namelist:[ {message:叶落森,id:1}, {message:姜艳霞,id:2}, {message:姜小帅,id:3} ] }, Vue.set(this...
原理深度解析Vue的响应式更新比React快
11-21
我们都知道 Vue 对于响应式属性的更新，只会精确更新依赖收集的当前组件，而不会递归的去更新子组件，这也是它性能强大的原因之一。 例子 举例来说 这样的一个组件： {{ msg }} 我们在触发 this.msg =...
vuejs的响应式对象（object）失效及解决思路
ghfuidy的博客
03-02 2409
在vuejs中设定一个对象（object）为响应式的时候，如果不注意的话，会失效，记录一下解决思路和简单的原理。
深入vue2响应式原理,在对象或数组新增属性无响应解决方法
weixin_47886687的博客
12-04 3869
前言 该问题只存在vue2, 基于Object.defineProperty的特性,vue3中的proxy已经解决了该问题,但也存在兼容性问题,例如IE系统任意版本都不支持. vue2是如何追踪数据变化形成响应 口水版：页面一进来会扫描数据,实行类似双向绑定，当初始时没有设定好属性，后面添加新属性，会存在数据中，但页面并不会进行响应同步（MVVM） 专业版 : 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Ob
vue数组和对象数据改变后页面不能响应
Serena_tz的博客
06-09 5086
由于 JavaScript 的限制，Vue不能检测数组和对象的变化，在我们改变数组和对象的数据时，页面没有办法响应式改变。因此，我们要采用一些特殊的方法来让页面响应数组和对象的改变。 数组 Vue 不能检测以下数组的变动，让页面响应式改变： 当你利用索引直接设置一个数组项时，例如： vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如： vm.items.length = newLength 举个例子： var vm = new Vue({ data:
vue2 对象、数组属性新增删除失去响应式($set、$delete) 和 vue3解构赋值原始类型失去响应式
guorui999的博客
01-19 3914
vue2 对象、数组属性新增删除失去响应式($set、$delete) 和 vue3解构赋值原始类型失去响应式
vue中哪些数组方法不是响应式的
imkaifan的博客
03-30 1428
何为数组的响应式 通过方法把数组中的元素改变了，页面上的视图也会更新。 响应式的方法 div id="app"> <div v-for="item in letters">{{item}}</div> <button @click="btnClick">按钮</button> </div> <script src="../js/vue.js"></script> <script>
HOW - Canvas 入门系列之基于vue-konva的多维表格（四）
最新发布
weixin_58540586的博客
05-17 1189
今天我们将将基于vue-konva 实现的一个表格渲染的组件。
vue3 数据响应式特性的含义和触发视图更新的方式有哪些
03-25
1. 直接修改数据：当我们直接修改Vue3实例中的响应式数据时，Vue3会自动更新相关视图。 2. 使用Vue提供的set方法：Vue3提供了一个set方法，我们可以使用它来修改数据，这样vue也能自动更新相关视图。 3. 使用Vue...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值