vue 不能检测数组长度 值变化原因解析
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属性。
vue 不能检测数组长度 值变化原因解析的更多相关文章
- php检测数组长度的函数sizeof count
php教程检测数组长度的函数sizeof count在php检测数组长度的函数有sizeof count 下面看个简单实例*/$colorlist = array("apple" ...
- vue 不能监测数组长度变化length的原因
由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如: ...
- vue中改变数组的值视图无变化
今天开发的时候遇到一个多选取消点击状态的,渲染的时候先默认都选中,然后可以取消选中,自建了一个全为true的数组,点击时对应下标的arr[index]改为false,数据改变了状态没更新,突然想起来单 ...
- Vue不能检测数组或对象变动问题的解决
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- sau交流学习社区—vue总结：使用vue的computed属性实现监控变量变化，使用vue的watch属性监控变量变化从而实现其他业务
有时候遇到这么个需求,输入框为空的时候,请求一遍接口,如果输入框不为空的时候,需要点击搜索按钮请求接口. 同步sau交流学习社区:https://www.mwcxs.top/page/464.html ...
- 前端组件化Polymer入门教程(6)——监听属性值变化
监听属性值变化 如果需要监听属性值变化可以通过给observer赋值一个回调函数. <say-Hello></say-Hello> <dom-module id=&quo ...
- Vue不能检测的数组变化 对象变化
数组: 由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时 ...
- 关于 vue 不能 watch 数组变化 和 对象变化的解决方案
原文地址:关于 vue 不能 watch 数组变化 和 对象变化的解决方案 vue 监听数组和对象的变化 vue 监听数组 vue 实际上可以监听数组变化,比如: data () { return { ...
- vue基础篇---修改对象或数组的值，页面实时刷新
这个问题估计大家很难想到,如果一个数组[1,2,3,4],然后我们v-for遍历,我们改变数组的值,arr[1] = 5 ,难道不应该改变么?按理说根据vue的特性应该是改变的,但是事实上确实数组已经 ...
随机推荐
- React Hooks useState为什么顺序很重要
一个Function Component的state状态整体是作为memoizedState存在FIber中的. function执行时,首先取memoizedState第一个base state,作 ...
- 关于 Unity WebGL 的探索（一）
到今天为止,项目已经上线一个多月了,目前稳定运行,各种 bug 也是有的.至少得到了苹果的两次推荐和 TapTap 一次首页推荐,也算是结项后第一时间对我们项目的一个肯定. 出于各种各样的可描述和不可 ...
- Mac下配置PHP支持GD库FreeType
一句话脚本 curl -s http://php-osx.liip.ch/install.sh | bash -s 5.6 记得要FQ哦. 或者下面代码保存成.sh ,代码从http://php-os ...
- WebService数据示例
通过webservice提交xml数据以及soap协议的使用 上次已经给大家分享了简单的webservice的使用,提交给服务器的数据只是简单类型的数据,这次呢换成了xml,并通过一个小例子来讲解so ...
- 数据库SQL归纳（一）
SQL功能分类 SQL 功能 动 词 数据定义 DDL CREATE.ALTER.DROP 数据查询 DQL SELECT 数据更改 DML INSERT.UPDATE.DELETE 数据控制 DCL ...
- [NOIp2017提高组]宝藏
#include<cstdio> #include<cctype> #include<algorithm> inline int getint() { regist ...
- 你真的完全了解Java动态代理吗？看这篇就够了
之前讲了<零基础带你看Spring源码--IOC控制反转>,本来打算下一篇讲讲Srping的AOP的,但是其中会涉及到Java的动态代理,所以先单独一篇来了解下Java的动态代理到底是什么 ...
- [原创]SSH中HibernateTemplate与HibernateDaoSupport关系
UserDaoImpl继承了HibernateDaoSupport类,在findAll() 方法里面调用了getHibernateTemplate(), 同时applicationContext.xm ...
- Codeforces Beta Round #2 B. The least round way dp
B. The least round way 题目连接: http://www.codeforces.com/contest/2/problem/B Description There is a sq ...
- Run-Time Check Failure #0
Run-Time Check Failure #0 - The value of ESP was not properly saved across a function call. This is ...