由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength

因为vue的响应式是通过 Object.defineProperty 来实现的,但是数组的length属性是不能添加getter和setter,所有无法通过观察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 不能监测数组长度变化length的原因的更多相关文章

  1. vue 不能检测数组长度 值变化原因解析

    1.vue不能检测数组长度或者值的变化 (1)数组长度变化 未检测到 <!DOCTYPE html> <html lang="en"> <head&g ...

  2. JavaScript 数组 length 属性获取数组长度或设置数组元素的数目

    JavaScript 数组 length 属性 JavaScript 数组 length 属性可返回或设置或组中元素的数目,语法如下: array_object.length 利用 length 属性 ...

  3. Java-Runoob-高级教程-实例-数组:03. Java 实例 – 获取数组长度-*

    ylbtech-Java-Runoob-高级教程-实例-数组:03. Java 实例 – 获取数组长度 1.返回顶部 Java 实例 - 获取数组长度  Java 实例 本文我们将为大家介绍如何使用数 ...

  4. vue中使用v-if判断数组长度是出现length报错

    在vue中使用v-if判断数组的长度时出现报错 <el-collapse-item :key="index" v-if="data.childrens.length ...

  5. 关于 vue 不能 watch 数组变化 和 对象变化的解决方案

    原文地址:关于 vue 不能 watch 数组变化 和 对象变化的解决方案 vue 监听数组和对象的变化 vue 监听数组 vue 实际上可以监听数组变化,比如: data () { return { ...

  6. vue中改变数组的值视图无变化

    今天开发的时候遇到一个多选取消点击状态的,渲染的时候先默认都选中,然后可以取消选中,自建了一个全为true的数组,点击时对应下标的arr[index]改为false,数据改变了状态没更新,突然想起来单 ...

  7. vue计算属性无法监听到数组内部变化

    计算属性可以帮助我们简化代码,做到实时更新,不用再自己添加function去修改data. 首先看一下计算属性的基本写法(摘自官网) var vm = new Vue({ el: '#demo', d ...

  8. delphi 判断一个数组的长度用 Length 还是 SizeOf ?

    判断一个数组的长度用 Length 还是 SizeOf ?最近发现一些代码, 甚至有一些专家代码, 在遍历数组时所用的数组长度竟然是 SizeOf(arr); 这不合适! 如果是一维数组.且元素大小是 ...

  9. 判断一个数组的长度用 Length 还是 SizeOf ?

    最近发现一些代码, 甚至有一些专家代码, 在遍历数组时所用的数组长度竟然是 SizeOf(arr); 这不合适! 如果是一维数组.且元素大小是一个字节, 这样用看不出错误, 譬如: var   arr ...

随机推荐

  1. Git的入门级玩法

    作为一个还没有实际开发经验的程序员,对于版本控制多少有些陌生,我通常的做法就是项目名后面加数字标记版本,然后备注一个文档说明更新.据个人了解svn用的比较多,我也学习了一点,无非是本地下载一个服务器端 ...

  2. 使用keras时出现 `pydot` failed to call GraphViz的解决办法

    问题来源于使用了 keras.utils.plot_model,报错内容为: 2018-08-29 08:58:21.937037: I tensorflow/core/platform/cpu_fe ...

  3. Flask实战第64天:帖子加精和取消加精功能完成

    帖子加精和取消加精是在cms后台来设置的 后台逻辑 首页个帖子加精设计个模型表,编辑apps.models.py class HighlightPostModel(db.Model): __table ...

  4. python itertools的使用(转)

    1. chain的使用 import itertools listone = ['a','b','c'] listtwo = ['11','22','abc'] for item in itertoo ...

  5. 【差分约束系统】【强连通分量缩点】【拓扑排序】【DAG最短路】CDOJ1638 红藕香残玉簟秋,轻解罗裳,独上兰舟。

    题意: 给定n个点(点权未知)和m条信息:u的权值>=v的权值+w 求点权的极小解和极大解(无解则输出-1) 极小解即每个点的点权可能的最小值 极大解即每个点的点权可能的最大值 题解: 差分约束 ...

  6. Problem J: 零起点学算法89——程序设计竞赛

    #include<stdio.h> //选择排序法 int main(){ ]; while(scanf("%d",&n)!=EOF){ ;i<n;i++ ...

  7. ie8以下浏览器注意事项

    ie8以下ajax请求或者socket请求时一定要加二级域名:(目的不能垮域访问)

  8. Educational Codeforces Round 8 E. Zbazi in Zeydabad 树状数组

    E. Zbazi in Zeydabad 题目连接: http://www.codeforces.com/contest/628/problem/D Description A tourist wan ...

  9. mysql语句总结

    mysql语句总结 -- 1,通过windows提供的服务管理来完成 -- services.msc -- 2,dos下的命令来完成 -- 停止 -- net stop mysql -- 启动 -- ...

  10. Android 垃圾回收,用软引用建立缓存

    内存对于手机来说是非常重要的. 下面总结了我们在注意创建对象时的规则,以及怎么更好更快的实行GC回收,和怎么构建高速的对象cace缓冲. 1 避免循环遍历的创建对象,哪怕对象很小,也是要占资源的. 2 ...