vue 中事件改变数组属性值，视图没有更新问题

vue 中事件改变数组属性值，视图没有更新问题

原因

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。

当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如： vm.items.length = newLength

这些情况的修改数组 视图是不会发生更新的。

<template>
  <div>
    <br/>
    <button @click="c">改变数组</button>
    <span class="div" v-for="(i,index) in this.arr" :key="index">
      {{ i }}
    </span>
    <br>
  </div>
</template>
<script>
export default {
  data () {
    return {
      data: [1, 2, 3, 4]

    }
  },
  computed: {
    arr () {
      return this.data
    }

  },
  methods: {
    c () {
    //  方法2
    // this.$forceUpdate()
      this.data[1] = 25

      // 方法1
      // this.$set(this.data, 1, 25)
      // this.data.splice(1, 1, 25)
      console.log('11111', this.data)
    }

  }
}
</script>
<style lang="less">
.div{
  margin: 10px;
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: pink;
  text-align: center;
  line-height: 20px;
}
</style>

此时点击事件修改数组

数据更新了但是视图还是没有改变。这里主要是2种方法 重新更新视图。
第一种方法 就是在修改数组方法的最上面调用

// this.$forceUpdate() 方法
就可以强制刷新视图达到更新的效果。

第二种就是根据官网上提到的

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：push()
pop()
shift()
unshift()
splice()
sort()
reverse()

这些方法修改数组可以更新视图，或者使用vm.$set()方法 具体就不介绍用法了。

// this.$set(this.data, 1, 25)

以上是我总结的2个解决数组修改更新视图的方法。