vue如何检查数组变化(Vue2中无法检测到数组变动的原因及解决)
类别:编程学习 浏览量:1613
时间:2022-01-14 02:31:36 vue如何检查数组变化
Vue2中无法检测到数组变动的原因及解决目录
- 解决方法
- 为什么Vue2.0中监听不到两种数组的变化?
- 源码分析
- Vue3.0
由于JavaScript 的限制,Vue 不能检测以下数组的变动:
- 当利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
- 当修改数组的长度时,例如:vm.items.length = newLength
var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是响应性的 vm.items.length = 2 // 不是响应性的
手动添加监听 // Vue.set Vue.set(vm.items, indexOfItem, newValue) vm.$set(vm.items, indexOfItem, newValue) 使用数组的变异方法,因为vue对数组的变异方法实现了响应式 // Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)
官方文档中对于这两点都是简要的概括为“由于JavaScript的限制”无法实现,而Object.defineProperty是实现检测数据改变的方案,那这个限制是指Object.defineProperty吗?
其实原因并不是因为Object.defineProperty()存在漏洞,而是出于性能问题的考虑。 Object.defineProperty 在数组中的表现和在对象中的表现是一致的,数组的索引就可以看做是对象中的 key 。
- 通过索引访问或设置对应元素的值时,可以触发 getter 和 setter 方法
- 通过 push 或 unshift 会增加索引,对于新增加的属性,需要再手动初始化才能被 observe 。
- 通过 pop 或 shift 删除元素,会删除并更新索引,也会触发 setter 和 getter 方法。
所以, Object.defineProperty 是有监控数组下标变化的能力的,只是vue2.x放弃了这个特性。
源码分析Object.property是可以检测到通过索引改变数组的操作的,而Vue没有实现。那我们看看源码:
Vue3.0Vue3.0中则用proxy代替了Object.defineProperty()解决了其存在的问题
以上就是Vue2中无法检测到数组变动的原因及解决的详细内容,更多关于Vue2 数组变动的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vue多个对象实现双向数据绑定(利用js实现Vue2.0中数据的双向绑定功能)
- vue动态路由实现权限控制(vue2/vue3路由权限管理的方法实例)
- vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)
- vue2.0自定义指令(vue2实现provide inject传递响应式)
- vue3和vue2(Vue3对比Vue2的优点总结)
- vue如何检查数组变化(Vue2中无法检测到数组变动的原因及解决)
- 涉及3条地铁线路 成都这4座轨道交通站点有新名字了(涉及3条地铁线路)
- 来了 成都轨道交通5条线路刷新 进度条(成都轨道交通5条线路刷新)
- 一部手机两套系统 OPPO Find X3的正确打开方式你知道吗(一部手机两套系统)
- OPPO用户看过来 汇总几个春节实用技巧,轻松搞定多设备联动玩法(汇总几个春节实用技巧)
- 北京旅游攻略(北京旅游攻略5日游及其花费)
- 四川旅游攻略(四川旅游攻略自由行攻略)
热门推荐
- 织梦dede后台更新文章(织梦Dedecms5.7整站调用购物车订单数量简单解决办法)
- iframe 弹窗(遮罩层 + Iframe实现界面自动显示的示例代码)
- dem高低值怎么调整(dede5.7修改标题title长度方法总结)
- django变量怎么使用(django的settings中设置中文支持的实现)
- 微信小程序引用模板的函数(微信小程序页面与组件之间信息传递与函数调用)
- 织梦网站栏目管理和内容发布(使用DEDE织梦计划任务功能定时更新首页)
- C#中string.format的格式和用法
- C# 正则表达式
- idea里面怎么配置tomcat(intellij idea 使用Tomcat部署的项目位置在哪)
- laravel获取数据(laravel 判断查询数据库返回值的例子)