时间:2021-05-26
由于 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,2for (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.prototypeexport 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 change ob.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的变化,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
vue官网关于此解释说明如下:vue2.0里面的深入响应式原理的异步更新队列官网说明如下:只要观察到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的
前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本。本文将详细介绍Vue数组更新及过滤排序变异方法 V
Java中length,length(),size()区别length属性:用于获取数组长度。eg:intar[]=newint{1,2,3}/***数组用le
Vue变化检测Object使用DefineProperty、数组使用方法拦截实现。最近,Vue3.0将采用ES6Proxy的形式重新实现Vue的变化检测,在官方
通过数组的length属性获取数组长度。 示例:vararr=['1','2'];//定义一个js数组alert(arr.length);//使用数组名.