在我們項目開發過程中，實例中的數據類型可以是對象、數組等。在對象中，某個屬性值發生更改時，我們可以通過對象的深度監聽，以達到重新渲染頁面的需求?；蛘卟殚嗊@篇文章

例如：

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

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

<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>

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

使用方法：

// 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>

以上兩種方式，均可達到監聽數組值變化的效果。

補充知識：vue數組操作不觸發前端重新渲染

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

此外，能夠監聽的數組變異方法

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

還有就是set