Vue 项目 v-model 数组中的内容更新了，视图层没有更新的解决办法

遇到的问题：

在Vue 项目中，通过 v-model 双向数据绑定，数据可以快速响应到页面上，但是有时候会发现，数组中的内容已经更新了，但是视图层却没有没有更新。

{
  { arr }} // 一直都是[0]
data(){
    return{
        arr:[0]
    }
},
mounted() {
    setTimeout(() => {
       this.arr[0] = 7;
       console.log(JSON.stringify(this.arr)) // [7]
    },1000)
}

原因：

因为数组中的内容没有像对象一样有特定的名字进行响应式，所以很多时候，v-model 对数组来说是没有效果的。

解决办法：

this.$forceUpdate();  // 手动更新数据

注意：你可能还没有留意到数组或对象的变更检测注意事项，或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态。

然而，如果你已经做到了上述的事项仍然发现在极少数的情况下需要手动强制更新ÿ