vue项目中，更改数组元素的值，视图没有实时更新？

问题背景：

export default {
  data(){
    showItems: [false, false, false, false]
  },
  methods: {
    showItem(index) {
      this.showItems[index] = true;
    },
    cancelItem(index) {
      this.showItems[index] = false;
    },
  },
}

如上代码，定义了showItems数组之后，通过点击按钮触发showItem和cancelItem函数来更改数组元素的值，发现页面上使用showItems数组元素的值并没有刷新，审查元素（如下图）找到该值，继续触发事件并查看发现元素值没有随着事件的触发而改变

原因：

由于 JavaScript 的限制及Vue实现响应式数据的原理，Vue 不能检测数组和对象的变化，具体原因参考Vue官网，我并没有对此深入理解。

解决方法：

我列出了四种（其中一种是评论者提供的）解决方法：

1. this.$forceUpdate()

export default {
  data(){
    showItems: [false, false, false, false]
  },
  methods: {
    showItem(index) {
      this.showItems[index] = true;
      this.$forceUpdate()
    },
    cancelItem(index) {
      this.showItems[index] = false;
      this.$forceUpdate()
    },
  },
}

1. this.$set(object, propertyName, value)

export default {
  data(){
    showItems: [false, false, false, false]
  },
  methods: {
    showItem(index) {
      this.$set(this.showItems, index, true)
    },
    cancelItem(index) {
      this.$set(this.showItems, index, false)
    },
  },
}

1. .push()

export default {
  data(){
    showItems: [false, false, false, false]
  },
  methods: {
    showItem(index) {
     this.showItems[index] = true;
     this.showItems.push();
    },
    cancelItem(index) {
      this.showItems[index] = false;
      this.showItems.push();
    },
  },
}

1. .splice()

export default {
  data(){
    showItems: [false, false, false, false]
  },
  methods: {
    showItem(index) {
     this.splice(index, 1, true);
    },
    cancelItem(index) {
      this.splice(index, 1, false);
    },
  },
}