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属性。