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的特性应该是改变的,但是事实上确实数组已经 ...
随机推荐
- SpringBoot整合Quartz作为调度中心完整实用例子
因为想要做一个类似于调度中心的东西,定时执行一些Job(通常是一些自定义程序或者可执行的jar包),搭了一个例子,总结了前辈们的相关经验和自己的一些理解,如有雷同或不当之处,望各位大佬见谅和帮忙指正. ...
- Valid Palindrome（LintCode）
Valid Palindrome Given a string, determine if it is a palindrome, considering only alphanumeric char ...
- Redux 中间件的执行顺序理解
Redux.applyMiddleware(thunk, middleware1) 和 Redux.applyMiddleware(middleware1, thunk) 的区别: <!DOCT ...
- webpack2 热加载js 文件
如果只要普通的热加载 只要如下配置就好了 package.json { "devDependencies": { "webpack": "^2.6.1 ...
- luogu P1979 华容道
solution 被假hash可了半天....sadQAQ code // luogu-judger-enable-o2 #include<queue> #include<cstdi ...
- python基础之if，while,for
流程控制之if判断 根据女性年龄不同的不同叫法,如: age = 24 if age < 18: print('小妹妹好') elif age <28: print('小姐姐好') els ...
- Vue视图下
3 Vue视图 3.5 样式绑定 class绑定 <p :class='对象'> <p :class="数组"> <p :class="{类 ...
- 推荐一套WPF主题皮肤
在CodePlex上发现了一套WPF的主题皮肤,直接应用于系统自带的控件,一共有四种配色方案,做得也还比较精致.感兴趣的朋友可以使用一下.点击下载 另外一套我比较喜欢的皮肤这里也推荐一下吧: ...
- NHibernate 存储过程 第十四篇
NHibernate也是能够操作存储过程的,不过第一次配置可能会碰到很多错误. 一.删除 首先,我们新建一个存储过程如下: CREATE PROC DeletePerson @Id int AS DE ...
- 解决delphi10.2.3 android tools闪退
解决delphi10.2.3 android tools闪退 修改D:\Program Files (x86)\Embarcadero\Studio\19.0\PlatformSDKs\android ...