vue 中 data 发⽣变化,视图不更新如何解决?

一、data 发⽣变化,视图不更新的原因

在 vue2 中 vue 实例的 data 数据是响应式 的(就是数据变了 视图也会跟着变)，⽽我们新增的属性并不是响应式的，由于受现在JS的限制，Vue⽆法检测到属性的新增或删除。所以有时⽆法实时的更新到视图上。

---

二、解决视图不更新的方法

在项⽬中遇到这类问题的时候⼀般是通过 this. 方法去解决 $set⽅法⼀共有三个参数,分别是：
⽬前属性，新增属性，新增的值.

三、

1.数组更新检测

数组有一些方法可以导致视图更新，

1. push()
2. pop()
3. shift()
4. unshift()
5. splice()
6. sort()
7. reverse()

---

替换数组： 例如：filter(), concat() 和 slice() ,这些不会改变原数组,但会返回一个新数组，可以用新数组替换旧数组。
(即：用一个含有相同元素的数组去替换原来的数组是非常高效的操作。)

---

2.注意

由于 JS 的限制，Vue 不能检测以下变动的数组：

1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

---

为了解决问题：

1. 以下方式可以实现与 vm.items[indexOfItem] = newValue 相同的效果，也会触发状态更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

2. 可以使用 vm.$set 实例方法，它是全局方法 Vue.set 的一个别名：

vm.$set(vm.items, indexOfItem, newValue)

3. 可以使用 splice

vm.items.splice(newLength)

---