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的特性应该是改变的,但是事实上确实数组已经 ...
随机推荐
- ARM开发板不工作的几个原因
刚焊了5块ARM(LPC2478)的开发板,上程序测试了一下,发现只有一个板子工作其他四个全部歇菜.努力地找了一会最终发现是板子的来个电阻焊翻了.因为是1206 的封装而且来个电阻在PCB上摆放的位置 ...
- Python开发基础-Day6-函数参数、嵌套、返回值、对象、命名空间和作用域
函数的使用原则 函数的使用必须遵循:先定义后使用的原则 函数的定义,与变量的定义是相似的,如果没有事先定义函数而直接引用就相当于在引用一个不存在变量名 定义阶段:只检测语法,不执行代码,当出现语法错误 ...
- [NOIP 2004] T3 合并果子
居然和BZOJ 1724完全一样o(╯□╰)o #include <bits/stdc++.h> using namespace std; typedef long long ll; in ...
- 【并查集】【DFS】搭桥
[codevs1002]搭桥 Description 有一矩形区域的城市中建筑了若干建筑物,如果某两个单元格有一个点相联系,则它们属于同一座建筑物.现在想在这些建筑物之间搭建一些桥梁,其中桥梁只能沿着 ...
- 【模拟】Gym - 101190A - Abbreviation
让你把所有的“连续的仅有首字母大写的”词组用缩写表示,并且在后面用括号注明原词组. #include<cstdio> #include<cstring> using names ...
- python基础之re,sys,suprocess模块
re 正则表达式 1.什么是正则? 正则就是用一系列具有特殊含义的字符组成的规则,该规则用来描述具有某一特征的字符串. 正则就是用来在一个大的字符串匹配出符合规则的子字符串 2.为什么用正则? 正则可 ...
- springmvc之文件上传、下载
1.接收到的是图片的流时 //上传头像 @RequestMapping(value = "/uploadHeadSculpture", method = RequestMethod ...
- 1.创建spring cloud父工程和子模块
创建父工程 idea创建父工程 idea创建一个工程.父工程管理公共资源 添加子模块 选择添加到父工程里面spring_cloud_parent 相应的子模块添加到父工程的pom.xml文件里
- Spring+Spring MVC+MyBatis整合
一.准备工作 1.1导入所需jar包 1.2数据库 CREATE TABLE `t_customer` ( `id` ) NOT NULL AUTO_INCREMENT, `username` ...
- 【MySQL笔记】解除输入的安全模式，Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column To disable safe mode, toggle the option in Preferences -> SQL Queries and reconnect.
Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE tha ...