亲宝软件园·资讯

展开

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

我是樊少 人气:1
想了解Vue2中无法检测到数组变动的原因及解决的相关内容吗,我是樊少在本文为您仔细讲解Vue2 数组变动的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue2,数组变动,Vue2,检测数组变动,下面大家一起来学习吧。

由于JavaScript 的限制,Vue 不能检测以下数组的变动:

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 。

所以, Object.defineProperty 是有监控数组下标变化的能力的,只是vue2.x放弃了这个特性。

源码分析

Object.property是可以检测到通过索引改变数组的操作的,而Vue没有实现。那我们看看源码:

Vue3.0

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

加载全部内容

相关教程
猜你喜欢
用户评论