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

最新推荐文章于 2024-05-23 16:08:37 发布
最新推荐文章于 2024-05-23 16:08:37 发布
阅读量509 收藏
点赞数
文章标签： javascript ViewUI

1、vue不能检测数组长度或者值的变化

（1）数组长度变化 未检测到

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>vue</title>
        <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
        <style>
            li:hover {
                cursor: pointer;
            }
        </style>
    </head>

    <body>
        <div class="wrap">
            <ul>
                <li v-for="item,index in items" v-on:click="handle(index)">
                    <span>{{item.name}}</span>
                    <span>{{numbers[index]}}</span>
                </li>
            </ul>
        </div>
        <script>
            var vm = new Vue({
                el: ".wrap",
                data: {
                    numbers: [0, 1, 2],
                    items: [{
                            name: 'jjj'
                        },
                        {
                            name: 'kkk'
                        },
                        {
                            name: 'lll'
                        },
                    ]
                },
                methods: {
                    handle: function(index) {
                        this.numbers.length = 0;
                        console.log(this.numbers,'view层未渲染，但通过console这个数组可以发现数据确实更新了')
                        //加入下面一行 使得view重新渲染一下 可以看到数组长度变化了
                        //this.items[0].name = 'abc';
                    }
                }
            });
        </script>
    </body>

</html>

（2）数组值变化 未检测到

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>vue</title>
        <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
        <style>
            li:hover {
                cursor: pointer;
            }
        </style>
    </head>

    <body>
        <div class="wrap">
            <ul>
                <li v-for="item,index in items" v-on:click="handle(index)">
                    <span>{{item.name}}</span>
                    <span>{{numbers[index]}}</span>
                </li>
            </ul>
        </div>
        <script>
            var vm = new Vue({
                el: ".wrap",
                data: {
                    numbers: [0, 1, 2],
                    items: [{
                            name: 'jjj'
                        },
                        {
                            name: 'kkk'
                        },
                        {
                            name: 'lll'
                        },
                    ]
                },
                methods: {
                    handle: function(index) {
                        this.numbers[index] = 100;
                        console.log(this.numbers, 'view层未渲染，但通过console这个数组可以发现数据确实更新了')
                        //加入下面一行 使得view重新渲染一下 可以看到数组长度变化了
                        //this.items[0].name = 'abc';
                    }
                }
            });
        </script>
    </body>

</html>

2、不能检测到数组长度或者值变化的原因（官方说明）

https://cn.vuejs.org/v2/guide/list.html#对象更改检测注意事项

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的

vm.b = 2
// `vm.b` 不是响应式的

数组的index和length属性没有绑定 get和 set方法。

3、vue解决方法

示例

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>vue</title>
        <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
        <style>
            li:hover {
                cursor: pointer;
            }
        </style>
    </head>

    <body>
        <div class="wrap">
            <ul>
                <li v-for="item,index in items" v-on:click="handle(index)">
                    <span>{{item.name}}</span>
                    <span>{{numbers[index]}}</span>
                </li>
            </ul>
        </div>
        <script>
            var vm = new Vue({
                el: ".wrap",
                data: {
                    numbers: [0, 1, 2],
                    items: [{
                            name: 'jjj'
                        },
                        {
                            name: 'kkk'
                        },
                        {
                            name: 'lll'
                        },
                    ]
                },
                methods: {
                    handle: function(index) {
                        //数组值变化
                        //this.$set(this.numbers, index, 100)
                        
                        //数组长度变化
                        this.numbers.splice(0)
                    }
                }
            });
        </script>
    </body>

</html>

4、具体原理--性能问题

https://segmentfault.com/a/1190000015783546

就是因为vue的get和set方法没有绑定数组的index（下标）和length属性。

 

weixin_34409822
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决Vue不能检测数组或对象变动的问题
08-27
下面小编就为大家分享一篇解决Vue不能检测数组或对象变动的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中数组长度_vue 异步调用，无法获得数组长度的问题
weixin_33897085的博客
01-13 1060
问题：由于get_roles方法存在处理时间长的问题，总是导致页面显示的时候，有显示不出来穿梭狂后面框里面内容的问题，经过2天的努力，终于找到原因，原来是异步调用的问题，需要设置等待时间，哎，一个简单的问题，搞了好些天：结果setTimeout 一个函数搞定；完整代码：@import "../../styles/common.less";@import "./roles-edit.less";{{...
vue中如何检测数组变化？
longzorg_cn的博客
11-25 363
数组考虑性能原因没有用defineProperty对数组的每一项进行拦截，而是选择重写数组 方法以进行重写。当数组调用到这 7 个方法的时候，执行 ob.dep.notify() 进行派发通知 Watcher 更新；需要通过以下7种变异方法修改数组才会触发数组对应的wacther进行更新。重写数组方法：push/pop/shift/unshift/splice/reverse/sort。ob.dep.notify() // 调用方法时更新视图；// 取出原型方法；// 拷贝原型方法；// 重写数组方法；
VUE解决Cannot read property ‘length‘ of undefined（发生原因以及解决思路）
hikktn的博客
04-09 4439
这个错误是什么 某个数组找不到值，有一个地方进行了强行赋值 为什么会报这个错误 因为你在使用数组时，有一些v-for循环渲染，它不是拿着data创建的 [] 空数组去遍历，而是在某个地方你去获取下拉框的数据，或者获取data数组的数据时，你强行将原本的 data 挂载的数据 由 [] 变成 undefined，在页面上的v-for渲染就会直接报错！ 而不是什么在v-if="data"判断这个，这种解决方法就是不让其渲染了。根本没有解决问题所在。 怎么解决这个错误 首先，你必须去检查生命周期里的所有
java获取数组长度报错_vue 不能监测数组长度变化length的原因
weixin_35353285的博客
02-28 389
由于 JavaScript 的限制，Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength因为vue的响应式是通过 Object.defineProperty 来实现的，但是数组的length属性是不能添加getter和setter，所...
浅谈Vue为什么不能检测数组变动
10-16
主要介绍了浅谈Vue为什么不能检测数组变动，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue不能观察到数组length的变化
11-30
由于 JavaScript 的限制，Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 因为vue的响应式是通过 ...
vue检测对象和数组的变化分析
01-19
在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的...和vm.b = 2这个不能检测到变化 需要用 Vue.set(object, key, value) 比如$set(data1
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 235
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
js知识点汇总之let const 和 var的区别
最新发布
fyw1789的博客
05-23 1292
声明的变量会先在作用域中被创建出来，但因此时还未进行词法绑定，所以是不能被访问的，如果访问就会抛出错误。因此，在这运行流程进入作用域创建变量，到变量可以被访问之间的这一段时间，就称之为暂时死区。其实上面不存在变量提升的例子中，其实也是暂时性死区，因为它有暂时性死区的概念，所以它压根就不存在变量提升了。实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。中的作用域有：全局作用域、函数作用域，命令声明变量之前，该变量都是不可用的。，导致绑定这个块级作用域，
springboot+vue2+elementui实现时间段查询
2301_76604664的博客
05-20 353
将前端传来的时间数组，赋值给对应的属性；
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
SongZhengxing_的博客
05-18 239
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
TS中的InstanceType函数和Typeof 操作符
05-23 106
【vue中的instanceType用法】父组件用ref获取子组件时，通过 instanceType获取子组件的类型。此外，typeof 操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型。尽管ES6引入了更清晰的类语法，但从类型检查的角度看，类仍然被视为函数。函数：该函数返回（构造） 由某个构造函数构造出来的实例类型组成的类型。操作符除了可以获取对象的结构类型之外，它也可以用来获取函数对象的类型。获取由某个构造函数构造出来的实例类型组成的类型。操作符可以用来获取一个变量或对象的类型。
前端开发攻略---用Vue实现无限滚动的几种方法
nibabaoo的博客
05-22 545
用vue实现无限滚动
15 VUE学习：插槽slot
sixpp的博客
05-23 1540
如果我们将这个概念拓展一下，可以想象的是，一些组件可能只包括了逻辑而不需要自己渲染内容，视图输出通过作用域插槽全权交给了消费者组件。Vue 组件的插槽机制是受[原生 Web Component `` 元素]的启发而诞生，同时还做了一些功能拓展，这些拓展的功能我们后面会学习到。现在组件可以用在不同的地方渲染各异的内容，但同时还保证都具有相同的样式。插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。在上面的[渲染作用域]中我们讨论到，插槽的内容无法访问到子组件的状态。
虚拟列表 vue-virtual-scroller 的使用
小秀的博客
05-22 314
【代码】虚拟列表 vue-virtual-scroller 的使用。
【MySQL精通之路】AdminAPI-使用
Anakki的博客
05-19 706
本文介绍MySQL SHELL提供的MySQL AdminAPI，使您能够，使用它们创建和，并集成。
Vue3的setup系列篇之defineEmits和defineProps使用方式
weixin_44072254的博客
05-21 225
defineEmits：触发事件（函数，等价于 $emit)defineProps：父组件传过来的值进行类型验证。
vue3帧听数组长度变化
04-12
Vue3中可以使用watchEffect方法来监听数组长度的变化，示例代码如下： ```javascript import { watchEffect } from 'vue' const arr = [1, 2, 3] watchEffect(() => { console.log('数组长度变为：', arr.length...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值