vue 数据变化触发页面响应的三种方式（解决：数据变化页面无响应/不刷新的问题）【含原理】

【问题描述】哪些数据变化，不会触发页面响应？

1.  通过数组的下标去修改数组的值

2.  对象属性的添加和删除

【原因解析】为什么以上情况，不会触发页面响应？

vue创建实例时，会深度遍历data中的所有属性，并使用 Object.defineProperty 将这些属性全部转为 getter/setter，以便数据变化时，页面做出响应。所以，vue初始化之后，对data中对象的属性的新增和删除，没有加入vue检测数据更新的机制中。

【解决方案】有三种方式可以触发页面响应

方法一 $set 【推荐】

使用this.$set可以手动将对象的属性添加到vue检测数据更新的机制中

this.$set(数组名,下标,新值)

this.$set(对象名,属性名,新值)

• 清空对象的属性值

Object.keys(this.myObj).forEach(key => (this.$set(this.myObj,key,'')))

方法二 splice 【仅对数组有效】

数组名.splice(下标，1，新值)

先删除数组指定下标对应的值，再在该下标插入新值。

方法三 修改key值【太复杂，不推荐】

标签上的key属性值发生变化时，会触发页面刷新

<ul>
    <li style="cursor: pointer" v-for="(item,index) in list" :key="index" @click="changeList(index)">
        <span :key="refreshKey"> {{item}}</span>
    </li>
</ul>

refreshKey:0,

changeList(index) {
    this.list[index]= 99;
    this.refreshKey = new Date().getTime()
},