最近做的项目是用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函数没有自动更新，需手动强制刷新。
