在我們項目開發(fā)過程中，實例中的數(shù)據(jù)類型可以是對象、數(shù)組等。在對象中，某個屬性值發(fā)生更改時，我們可以通過對象的深度監(jiān)聽，以達到重新渲染頁面的需求。或者查閱這篇文章

例如：

<script> export default { data(){ return { objVal: { name: ’obj’, type: ’obj’ } } }, watch:{ objVal:{ handler(val,oldval){ }, deep: true, } }, methods:{ changeObj(){ this.objVal.name = ’newobj’; } } }</script>

但是，在使用同一種方式進行數(shù)組值更改監(jiān)聽時，這種做法是無效的。

<script>export default { data() { return { arrList: [1,2,3,4,5] }; }, watch: { arrList: { handler(val, oldval) { }, deep: true } }, methods: { changeArr() { // 無效 this.arrList[0] = 10; } }};</script>

上述用以監(jiān)聽數(shù)組值變化的方法是無效的，vue是不會響應數(shù)據(jù)變化而重新去渲染頁面。在vue中僅需要通過修改賦值語句的方式，即可讓vue響應數(shù)組數(shù)據(jù)的變化。具體操作如下：

使用方法：

// Vue.setVue.set(vm.items, indexOfItem, newValue)// Array.prototype.splicevm.items.splice(indexOfItem, 1, newValue)

具體使用案例：

<script>export default { data() { return { arrList: [1,2,3,4,5] }; }, methods: { changeArr() { // this.arrList[0] = 10; // 修改為： this.arrList.splice(0, 1, 10); } }};</script>

或：

<script>export default { data() { return { arrList: [1,2,3,4,5] }; }, methods: { changeArr() { // this.arrList[0] = 10; // 修改為： this.$set(this.arrList, 0, 10); } }};</script>

以上兩種方式，均可達到監(jiān)聽數(shù)組值變化的效果。

補充知識：vue數(shù)組操作不觸發(fā)前端重新渲染

暫時使用給數(shù)組先賦值 [ ] ,然后重新賦值的方式解決。

此外，能夠監(jiān)聽的數(shù)組變異方法

https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95

還有就是set