• 当利用索引直接设置一个数组项时，例如：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()解决了其存在的问题

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用React-color制作取色器的方法操作是什么

  本文通过代码给大家介绍了使用react-color实现前端取色器的方法，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧

• JS中switch的正确写法是怎样，要注意什么

  本篇文章给大家带来了关于javascript的相关知识，其中主要整理了switch的四种写法相关问题，包括了IIFE 封装、封成策略等等内容，下面一起来看一下，希望对大家有帮助。

• Vue中如何实现循环的滚动动画效果，代码是什么

  这篇文章主要介绍了Vue实现一种简单的无限循环滚动动画的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• Vue多页面配置是怎样的，单页和多页应用有何不同

  这篇文章主要介绍了vue多页面配置，单页应用这个概念，是随着前几年 AngularJS、React、Ember 等这些框架的出现而出现的。在前面的前言内容里，我们在页面渲染中讲了页面的局部刷新,而单页应用则是使用了页面的局部刷新的能力,下面来看看详细内容,需要的朋友可以参考一下

• 如何用JS实现仿百度新闻的导航栏，代码是什么

  这篇文章主要为大家详细介绍了JS实现百度新闻导航栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下