Vue不能观察到数组length的变化

 更新时间:2018年06月08日 13:42:23   作者:buyue  
因为vue的响应式是通过 Object.defineProperty 来实现的,但是数组的length属性是不能添加getter和setter,所有无法通过观察length来判断。这篇文章主要介绍了为什么Vue不能观察到数组length的变化,需要的朋友可以参考下

由于 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 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的变化,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Vue3封装全局Dialog组件的实现方法

    Vue3封装全局Dialog组件的实现方法

    3封装全局Dialog组件相信大家都不陌生,下面这篇文章主要给大家介绍了关于Vue3封装全局Dialog组件的实现方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • 使用vue.js写一个tab选项卡效果

    使用vue.js写一个tab选项卡效果

    Vue 实现 Tab切换实现的场景很多,比如,利用vue-router、利用第三方插件、利用组件等等.本文使用组件来实践tab选项卡
    2017-03-03
  • 浅谈vue中文件下载的几种方式及方法封装

    浅谈vue中文件下载的几种方式及方法封装

    本文主要介绍了浅谈vue中文件下载的几种方式及方法封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • vue使用refs获取嵌套组件中的值过程

    vue使用refs获取嵌套组件中的值过程

    这篇文章主要介绍了vue使用refs获取嵌套组件中的值过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue数据变化但页面刷新问题

    vue数据变化但页面刷新问题

    这篇文章主要介绍了vue数据变化但页面刷新问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue自定义底部导航栏Tabbar的实现代码

    vue自定义底部导航栏Tabbar的实现代码

    这篇文章主要介绍了vue自定义底部导航栏Tabbar的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • Vue中渲染系统模块的实现详解

    Vue中渲染系统模块的实现详解

    想要实现一个简洁版的Mini-Vue框架,应该包含三个模块:分别是:渲染系统模块、可响应式系统模块、应用程序入库模块,本文主要介绍的是渲染系统模块的实现,需要的可以参考一下
    2023-07-07
  • ant design vue动态循环生成表单以及自定义校验规则详解

    ant design vue动态循环生成表单以及自定义校验规则详解

    这篇文章主要介绍了ant design vue动态循环生成表单以及自定义校验规则详解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • vuex store 缓存存储原理分析

    vuex store 缓存存储原理分析

    这篇文章主要介绍了vuex store 缓存存储原理,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue2.0 自定义 饼状图 (Echarts)组件的方法

    vue2.0 自定义 饼状图 (Echarts)组件的方法

    下面小编就为大家分享一篇vue2.0 自定义 饼状图 (Echarts)组件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03

最新评论