【Vue进阶】双向绑定视图不更新，$set()失效的解决方法

前言

现状： 在开发的过程中，我们经常遇到数据更新后，而视图不更新的情况，有的使用this.$set()就能解决，然而有的即使用了this.$set()视图也不更新。
特此记录下处理“数据更新后而视图不更新”问题的解决方法。

---

一、使用深度监听

如果是父子组件间通过props传值的话，先尝试使用深度监听。

watch: {
    rowData: {
      handler(val) {
      	console.log(val)
      },
      deep: true,
      immediate: true
    }
  },

二、使用this.$set()

1、使用this.$set()改变内容

如果是数组对象赋值，使用this.$set()改变数组对象中的内容。

const systemList = [{ id: '1', name: '系统1' }, { id: '2', name: '系统2' }]
this.$set(this.form, 'systemList', systemList)

2、先删除再重新赋值

如果使用this.$set()视图还是不更新的话，先删除再重新赋值。

this.$delete(this.form, 'systemList')
const systemList = [{ id: '1', name: '系统1' }, { id: '2', name: '系统2' }]
this.$set(this.form, 'systemList', systemList)

3、强制更新视图

如果视图还是不更新的话，赋值后强制更新视图。

const systemList = [{ id: '1', name: '系统1' }, { id: '2', name: '系统2' }]
this.$set(this.form, 'systemList', systemList)
this.$forceUpdate()

4、key增加时间戳

如果涉及到循环，使用上述方法视图不更新的话，在循环时给key增加时间戳。

<div v-for="(item, i) in form.systemList" :key="item.id + Date.now()">
	{{ item.name }}
</div>

PS:如果使用上述的单个方法，视图不更新的话，可以尝试多种方法结合使用哦~

---

总结

【Vue进阶】系列文章持续更新中……