Vue2中无法检测到数组变动的原因及解决

目录
  • 解决方法

由于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)

为什么Vue2.0中监听不到两种数组的变化？

官方文档中对于这两点都是简要的概括为“由于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.0

Vue3.0中则用proxy代替了Object.defineProperty()解决了其存在的问题

以上就是Vue2中无法检测到数组变动的原因及解决的详细内容，更多关于Vue2 数组变动的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 浅谈Vue为什么不能检测数组变动

    问题来源:https://segmentfault.com/q/1010000015780995 问题描述:Vue检测数据的变动是通过Object.defineProperty实现的,所以无法监听数组的添加操作是可以理解的,因为是在构造函数中就已经为所有属性做了这个检测绑定操作. 但是官方的原文:由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如

  • 解决Vue不能检测数组或对象变动的问题

    来看一个实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script> <style> li:hover

  • Vue.js中数组变动的检测详解

    前言 最近在尝试用Vue.js重构公司的现有业务代码,组件化的设计思路和MVVM的思想让我深深沉迷于其中.但是是踩到了不少坑,就比如这篇文章介绍的数组绑定后的更新检测. 相信大家都知道Observer,Watcher,vm 可谓 Vue 中比较重要的部分,检测数据变动后视图更新的重要环节.在 vue.js中$watch的用法示例 中,我们讨论了如何实现基本的 watch . 接下来,我们来看看如何实现数组变动检测. 例子: // 创建 vm let vm = new Vue({ data: {

  • Vue2中无法检测到数组变动的原因及解决

    Vue2中无法检测到数组变动的原因及解决

    目录 解决方法 由于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 // 不是响应性的 解决

  • VSstudio中scanf返回值被忽略的原因及解决方法(推荐)

    VSstudio中scanf返回值被忽略的原因及解决方法(推荐)

    相信有不少人在使用vs的时候会遇到以下这个问题:scanf返回值被忽略,接下来我就告诉大家该如何解决这个问题 出现问题的原因: 因为scanf()在读取数据时不检查边界,所以可能会造成内存泄漏.Microsoft公司觉得这个函数不安全,于是自己在VS编译器中提供了scanf_s()这个函数,想解决以下这个问题有以下几种方法: 方法一(不推荐!): 将scanf改为scanf_s即可解决这个问题,效果如下所示: 虽然这种方法可行,但是在这里不推荐使用这种方式,因为编写程序要保证其有良好的可移植性,

  • Vue2中无法监听数组和对象的某些变化问题

    Vue2中无法监听数组和对象的某些变化问题

    目录 一.数组 1. 不能监听的情况 2. 替代做法 3. 注意 二.对象 1. 不能监听的情况 2. 替代做法 三.分析 vue 2 无法监听数组和对象的这些变化的原因 1. 对于数组 2. 对象 四.vue 3响应式原理 关于vue监听的一些问题 对象的监听 数组的监听 一.数组 1. 不能监听的情况 (1) 直接通过下标赋值  arr[i] = value (2) 直接修改数组长度 arr.length = newLen 2. 替代做法 (1)修改值 Vue.set(arr, index,

  • BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)

    今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路: 1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加载页放置一个时间控件,测试通过 3,在模态框最外层放置一个时间控件,不通过 主要原因是模态框与时间下拉菜单层级关系造成(z-index),因时间控件是收bootstrap的时间控件.js文件生成,所以导致在页面与css样式表中修改无效,网上有直接修改bootstrap的时间控件.js文件,然而bo

  • SpringBoot中创建的AOP不生效的原因及解决

    SpringBoot中创建的AOP不生效的原因及解决

    目录 SpringBoot 创建AOP不生效的原因 SpringBoot aop无效的情况 项目结构 SpringBoot 创建AOP不生效的原因 最近在学习SpringBoot,今天学习了Aop的注册方式,原理很简单,配置也很简单,但是我注册了切面之后切面一直不生效,是为什么呢?查了好久的资料终于发现了原因,可以看下图我的切面注册类并没有问题 然后在网上偶然看到可能是主程序扫描的原因,才发现了原因,可以看到我的显示方式本来是flat的,那样的话就很难找出原因了 修改为hirerchical就可

  • Angular2学习教程之ng中变更检测问题详解

    开发中遇到的问题 在开发中遇到一个这样的问题,代码不便透露,这里用简单的例子还原一下问题所在: 有三个组件,第一个是用来展示Todo列表的组件TodoComponent,Todo是个类,包含id和name属性. @Component({ selector: 'todo-list', template: ` <p *ngFor='let item of todos'>{{ item.name }}</p> `, }) export class TodoComponent{ @Inpu

  • js 用于检测类数组对象的函数方法

    如下所示: //判定o是否是一个类数组对象 //字符串和函数有length属性,但是它们 //可以用typeof检测将其排除.在客户端JavaScript中,DOM文本节点 //也有length属性,需要用额外判断o.nodeType!=3将其排除 function isArrayLike(o){ if(o&&//o非null/undefined等 typeof o==="object"&&//o是对象 isFinite(o.length)&&a

  • PHP检测一个数组有没有定义的方法步骤

    php中定义数组的方法: 1.PHP定义数组的格式: 数组名=array(); 如:$aa=array();//这样就定义了一个数组, 之后给元素赋值: $aa[0]="9016"; $aa[1]="9017"; $aa[2]="9018"; 2.PHP输出数组的方法: foreach($aa as $val) { echo$val; } 也可以在定义数组时直接赋值 $aa=array(0=>"9016",1=>&

随机推荐