vue遍历 数组 没响应 ( $set() )

1.在vue中可以改变原数组的方法只有7个数组的方法是响应式的 ，其他都不是响应式的

push  pop  unshift  shift  sort  reverse  splice

2.如果直接通过索引号修改数组成员，界面是不会更新的
解决方法：$set()方法

<template>
  <div>
      <ul>
        <li v-for="item in arr" :key="item">{{ item }}</li>
      </ul>
      <button @click="changeArr">修改数组元素</button>
      <button @click="sliceArr">截取数组的前三项</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [4, 5, 6, 78, 9, 1],
    };
  },
  methods: {
    changeArr() {
      // 往数组的最后一项添加一项
      this.arr.push(this.arr[0]);
      //  往处最前面的一项
      this.arr.shift();
    },
    sliceArr() {
      //slice返回一个新数组 不会修改原数组
      this.$set(this.arr, 2, 170);
    },
  },
};
</script>