vue项目中改变数据视图不更新

最近做的项目是用vue写租赁APP，其中再写购物车页面的时候，当调用后端删除接口删除数据之后，视图并未及时更新，接下来就来细说一下这个问题的解决方法。

原理

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。（摘自官网）

data.png

• 关于数组数据变动我们操作数据的方法有很多，变动数据时，有些方法无法被vue监测，有些可以。
  例如这些操作数组的方法：
  （1）push()，pop()，shift()，unshift()，splice()，sort()，reverse()；
  （2）vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)（推荐使用）；
  （3）filter()， concat()， slice()这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组。
• 由于 JavaScript 的限制，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 // 不是响应性的

• 针对上面利用索引设置值的情况可以这样解决：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// 或使用vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名
vm.$set(vm.items, indexOfItem, newValue)

• 针对修改长度的情况：

vm.items.splice(newLength)

• 当操作数据类型为对象时，由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value)方法向嵌套对象添加响应式属性。例如，对于：

var vm = new Vue({
  data: {
    userProfile: {
      name: 'hhh'
    }
  }
})

可以添加一个新的 age 属性到嵌套的 userProfile 对象：

Vue.set(vm.userProfile, 'age', 17)
// 或
vm.$set(vm.userProfile, 'age', 17)

需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象:

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 17,
  color: 'blue'
})

this.$forceUpdate()

• 使用this.$forceUpdate();进行强制渲染,可以解决页面v-for中修改item属性值后页面v-if不改变的问题。原因是因为数据层次太多，render函数没有自动更新，需手动强制刷新。