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的特性应该是改变的,但是事实上确实数组已经 ...
随机推荐
- Office 2016系列下载地址
版本:Office 2016 Pro Plus 64位文件名:SW_DVD5_Office_Professional_Plus_2016_64Bit_ChnSimp_MLF_X20-42426.ISO ...
- 【前端必备】一、HTML篇
1.文档类型是什么概念,起什么作用? <!DOCTYPE> 声明此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范. 该标签可声明三种 DTD 类型,分别表示严格版本 ...
- 线性基【CF845G】Shortest Path Problem?
Description 给定一张 \(n\) 个点 \(m\) 条边的无向图,一开始你在点 \(1\),且价值为 \(0\) 每次你可以选择一个相邻的点,然后走过去,并将价值异或上该边权 如果在点 \ ...
- CodeForces 809D Hitchhiking in the Baltic States（FHQ-Treap）
题意 给你长度为$n$的序列,序列中的每个元素$i$有一个区间限制$[l_i,r_i]$,你从中选出一个子序列,并给它们标号$x_i$,要求满足 $,∀i<j,x_i<x_j$,且$, ∀ ...
- python3实践-从网站获取数据(Carbon Market Data-GD) （bs4/Beautifulsoup）
结合个人需求,从某个网站获取一些数据,发现网页链接是隐藏的,需要通过浏览器看后面的代码来获取真实的链接. 下面这个案例,直接是从真实的链接中爬去数据. 此外,发现用pandas的read_html不能 ...
- CentOS7和CentOS6的主要区别
了解一下就好 1. 文件系统的区别.CentOS6默认使用的是ext4的文件系统,而CentOS7使用的是xfs. 2. 硬盘默认调度算法不一样.CentOS6默认使用的是cfq,而CentOS7 ...
- js中ajax的异步性
最近项目里遇到ajax异步性的问题,简化后的代码如下: function ajaxGetEvents(calendarView, time) { var year = time.getFullYear ...
- 【模拟退火】poj1379 Run Away
题意:平面上找一个点,使得其到给定的n个点的距离的最小值最大. 模拟退火看这篇:http://www.cnblogs.com/autsky-jadek/p/7524208.html 这题稍有不同之处仅 ...
- 【后缀自动机】CDOJ1551 Hesty Str1ng
可以发现,对于原串的每个长度>1的子串而言,将其除了最后一个字符之外反向接在其结尾,都是一个合法解.该解的长度一定是奇数. 对于原串的每个长度>2,且结尾两个字符相同的子串而言,将其除了最 ...
- 【shiro】2.spring整合shiro，注解控制shiro用户/角色/权限And/OR，没有权限跳转到固定页面
这几天粗浅的把shiro整合到spring中,并且注解控制shiro用户/角色/权限And/OR 步骤: 1.首先maven搭建web项目 2.创建数据库 user/role/authority 其中 ...