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