深层次obj对象改变 视图不更新渲染问题

深层次obj对象改变 视图不更新渲染问题

前几天做项目的时候遇到的一个问题，更新data中某个对象的属性，数据更新了，视图却没有更新。

因为实际代码中，该对象的层次比较深，所以这里简化 一下，着重讲述的是解决该问题的方法。

1. 使用this.$set

语法：

Vue.set(target, propertyName/index, value)

• target 需要修改的对象或者是数组
• propertyName/index 需要修改的对象的属性名，如果是数组的话就使用下标
• value 需要修改的值

代码：

this.$set(this.params.paramValue, 'lastList', val)

结果：

数据更新了，视图没更新。

2. Object.assign

语法：

Object.assign(target, …sources)

• target 目标对象
• sources 源对象
• 返回值 目标对象
  Object.assign方法用于对象的合并，将源对象的所有可枚举属性，复制到目标对象

代码：

const paramValue = this.params.paramValue
 this.params.paramValue = Object.assign({}, paramValue, { lastList: val })

结果：

数据更新了，视图也更新了

3. 添加Key

为组件添加key，当key变化时dom会被刷新

代码：

先在组件上绑个key属性，在赋值之后，改变key的值

this.paramValue.lastList  = val
this.key = new Date().getTime()

结果：

数据更新了，视图也更新了