vue数据改变了，视图不更新不刷新问题

vue数据改变了，视图不更新不刷新问题

描述：在对象中添加一个属性 seen，初始想法使用for循环添加 seen 属性，然后改变这个属性去更新视图，然后发现不行。

解决，使用$set：

this.$set(item, 'seen', false)

代码：

// 请求来的数据，在 res.results 中没有seen这个属性，添加这个属性
this.worklogs = res.results
res.results.forEach(item => {
  this.$set(item, 'seen', false)
})

// 改变这个属性来控制显示隐藏
showDesc(log) {
  log.seen = !log.seen
}

---

对象更改检测

在一个组件实例中，只有在data里初始化的数据才是响应的，Vue不能检测到对象属性的添加或删除，没有在data里声明的属性不是响应的。

Vue不允许在已经创建的实例上动态添加根级响应式属性，但是可以使用$set方法将相应属性添加到嵌套的对象上。

已经声明的属性正常响应的，没有声明的属性虽然值发生了改变，console也能打印出来，但并不能响应到视图上。需要用Vue.set(object, key, value) 或 this.$set(object,key,value) 方法将响应属性添加到嵌套的对象上。

注意：object 必须是在data中已经声明的对象。

// this.form.testB = 'desc' // 无效
this.$set(this.form,'testB ','desc') // 动态添加
// 或者 Vue.set(vm.form,'testB ','desc')

---

Object.assign方法，向嵌套对象上添加多个属性。object.assign方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，并返回目标对象。

语法：vm.object = Object.assign( { } , vm.object , {a:' 1 ', b:' 2 ' }) 

注意：object 必须是在data中已经声明的对象。

this.form1 = Object.assign({}, this.form1, {f1:'f1',f2:'f2'})

数组更改问题

vue检测不到变动问题：1、利用索引直接设置一个项；2、修改数组长度。

1、

changeMe(index) {
  // this.trees[index] = 'xxx' // 无响应
  this.$set(this.trees, index, 'xxx') // 有响应
  // this.trees.splice(index, 1, 'xxx') // 有响应
}

2、

// 改变数组长度
// this.trees.length = 2 // 无响应
this.trees.splice(2) // 有响应

 

感谢作者：

https://www.cnblogs.com/YuKiee/p/9681151.html