Vue不能观察到数组length的变化
2018-06-08 13:42
609 查看
由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:
vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:
vm.items.length = newLength
因为vue的响应式是通过 Object.defineProperty 来实现的,但是数组的length属性是不能添加getter和setter,所有无法通过观察length来判断。
为什么Vue不能观察到数组length的变化
如下代码,虽然看起来数组的length是10,但是for in的时候只能遍历出0, 1, 2,导致了只有前三个索引被加上了getter 和setter
var a = [0, 1, 2] a.length = 10 // 只是显示的给length赋值,索引3-9的对应的value也会赋值undefined // 但是索引3-9的key都是没有值的 // 我们可以用for-in打印,只会打印0,1,2 for (var key in a) { console.log(key) // 0,1,2 }
那么vue提供了一些解决方法
使用内置的Vue.$set
让数组显式的进行某个索引的观察 Vue.set(array, indexOfItem, newValue)
实际上是调用了
Object.defineProperty(array, indexOfItem, { enumerable: true, configurable: true, get() { }, set(newVal) { } })
这样可以手动指定需要观察的key,那么就可以达到预期的效果。
重写了 push, pop, shift, unshift, splice, sort, reverse方法
Vue源码
const arrayProto = Array.prototype export const arrayMethods = Object.create(arrayProto) /** * Intercept mutating methods and emit events */ ;[ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse' ] .forEach(function (method) { // cache original method const original = arrayProto[method] def(arrayMethods, method, function mutator (...args) { const result = original.apply(this, args) const ob = this.__ob__ let inserted switch (method) { case 'push': case 'unshift': inserted = args break case 'splice': inserted = args.slice(2) break }if (inserted) ob.observeArray(inserted) // notify changeob.dep.notify() return result }) })
这些是在Array.__proto__上 进行了方法重写或者添加
并且对添加属性的方法如 push,unshift,splice 所添加进来的新属性进行手动观察,源码为
if (inserted) ob.observeArray(inserted)
对以上方法进行了手动的进行消息触发
ob.dep.notify()
结论
vue对数组的length直接改变无法直接进行观察,提供了vue.$set 进行显式观察,并且重写了 push, pop, shift, unshift, splice, sort, reverse方法来进行隐式观察。
以上所述是小编给大家介绍的Vue不能观察到数组length的变化,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 【vue.js】直接给数组赋值,vue.js不能检测到数组变化
- 关于 vue 不能 watch 数组变化 和 对象变化的解决方案
- vue数组中数据变化但是视图没有更新解决方案
- vue中 --- 变化检测问题(数组相关)
- Vue 数组视图不能更新的解决方案
- vue检测对象和数组的变化
- vue数组中对象属性变化页面不渲染问题
- vue 数组和对象不能直接赋值情况和解决方法
- 目前住院病人主要由护士护理,这样做不仅需要大量的护士,而且由于不能随时观察危重病人的病情变化,还可能会延误抢救时机。某医院打算开发一个以计算机为中心的患者监护系统,试写出问题定义,并且分析开发这个系统的可行性。
- vue中遇到的坑 --- 变化检测问题(数组相关)
- 逐步观察数组变化
- 为什么直接修改数组长度或设置数组项的索引时,Vue不能检测到数组的变动?
- vue使用watch 观察路由变化,重新获取内容
- 解决vue数组中对象属性变化页面不渲染问题
- vue中遇到的坑之变化检测问题(数组相关)
- 解决Vue不能检测数组或对象变动的问题
- Vue不能检测数组或对象变动问题的解决
- vue.js遇到的问题-数组数据改变,页面不能实时显示
- vue检测对象和数组的变化分析
- vue数组中数据变化但是视图没有更新解决方案