vue 解决数组赋值无法渲染在页面的问题

当 Vue 绑定的数据是一个数组时，使用原生的赋值方式（例如 array[0] = newValue）并不会触发组件的重新渲染，因为 Vue 无法识别这种方式的数据变动。为了解决这种问题，需要使用 Vue 提供的特殊方法，或在代码层面做出一些调整。

下面是解决数组赋值无法渲染在页面的问题的完整攻略：

1. 使用特殊方法进行数组数据更新

Vue 提供了一些特殊方法用于进行数组数据的更新，这些方法不仅会改变数组本身的内容，还能够让 Vue 检测到数据变化从而触发重新渲染组件。

以下是常用的数组数据更新方法：

push()

push() 方法会向数组的末尾添加一个或多个元素，并返回数组的新长度。

const app = new Vue({
  data: {
    itemList: []
  },
  methods: {
    addItem() {
      this.itemList.push('item')
    }
  }
})

pop()

pop() 方法会移除数组中的最后一个元素，并返回该元素的值。

const app = new Vue({
  data: {
    itemList: ['item1', 'item2', 'item3']
  },
  methods: {
    removeItem() {
      this.itemList.pop()
    }
  }
})

shift()

shift() 方法会移除数组中的第一个元素，并返回该元素的值。

const app = new Vue({
  data: {
    itemList: ['item1', 'item2', 'item3']
  },
  methods: {
    removeFirstItem() {
      this.itemList.shift()
    }
  }
})

splice()

splice() 方法可以向数组任意位置插入或移除一个或多个元素。

const app = new Vue({
  data: {
    itemList: ['item1', 'item2', 'item3']
  },
  methods: {
    removeItemAt(index) {
      this.itemList.splice(index, 1)
    },
    addItemAt(index) {
      this.itemList.splice(index, 0, 'item')
    }
  }
})

2. 使用Vue.set()方法进行数组数据更新

如果不想使用 Vue 提供的特殊方法更新数组数据，也可以使用 Vue.set() 方法，它可以向对象或数组中添加新的属性或元素。Vue.set() 并不是修改了数组，而是使用新的数组替代了老的数组，从而让 Vue 监听到数据的变化。

const app = new Vue({
  data: {
    itemList: ['item1', 'item2', 'item3']
  },
  methods: {
    addItem() {
      Vue.set(this.itemList, this.itemList.length, 'item')
    }
  }
})

在上述示例中，我们首先使用 Vue.set() 向数组末尾添加了一个新的元素 'item'，这么改变数组是会触发组件重新渲染的。

另外一个例子是，在数组中的某个位置添加新元素。下面是使用 Vue.set() 方法向数组特定位置添加元素的示例：

const app = new Vue({
  data: {
    itemList: ['item1', 'item2', 'item3']
  },
  methods: {
    addItem(index) {
      Vue.set(this.itemList, index, 'item')
    }
  }
})

在上述示例中，我们使用了 Vue.set() 方法，将字符串 'item' 插入到了第二个位置上，这样就可以在数组中对特定位置进行修改并触发组件更新了。