vue中对数组值变化的监听与重新响应渲染的方法

在我们项目开发过程中，实例中的数据类型可以是对象、数组等。在对象中，某个属性值发生更改时，我们可以通过对象的深度监听，以达到重新渲染页面的需求。或者查阅博主的文章 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>

以上两种方式，均可达到监听数组值变化的效果。