vue中的值变化但页面不自动更新的问题

明明 console 发现值已经变化了，但是页面却始终没有更新。

<div
  v-for="(item, idx) in items" 
  :key="idx" 
  @click="onClick"
>
  <span :value="item" />
</div>

计算属性中的代码

data() {
  return {
    items: [1, 2],
  }
}

methods中改变计算属性的方法`

onClick(index){
    this.$set(this.items, index, this.items[index]+1);
},

• this.$set() 的作用可以让值变成和 data 中的值一样，是响应式的；
• data 中 return 的所有值都是经过 Object.defineProperty() 处理过的，但是 vue 中不支持数组下标的更改。
• vue 中对数组的 api 进行了重写，所以可以使用 splice 等方法也是可以的。

总结：写 vue 的时候，我们需要的值，最好都定义到 data 中，这样可以避免不必要的麻烦；还有一种方法是 this.$forceUpdate() 可以强制刷新页面，不过并不建议用到这个方法，合理的代码也是不需要用到的。