0
点赞
收藏
分享

微信扫一扫

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()
},

举报

相关推荐

0 条评论