在我們專案開發過程中，例項中的資料型別可以是物件、陣列等。在物件中，某個屬性值發生更改時，我們可以通過物件的深度監聽，以達到重新渲染頁面的需求。或者查閱博主的文章 https://blog.csdn.net/weixin_37861326/article/details/81034231；

例如：

<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.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.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>

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