修改数据页面不更新的原因和解决方案

在项目中，我们有时会遇到我们修改了一个数据，但是视图并不会更新的情况，比如我们在做一个简单的购物车，请求过来的数据没有数量这个属性，于是我们像给这个对象添加一个count属性来表示数量：

goods.count = 1;

然后我们用计步器增加或减少这个数量时，发现视图并不会发生改变，但是我们console.log(count)却发现count时变化的，没有问题，这是为什么呢？

这里要vue的一些底层原理，vue之所以能够做到双向数据绑定，靠的是Object.defineProperty()方法，vue使用Oberver对data中的数据进行数据劫持，时其拥有get和set方法，但是我们通过goods.count = 1;这种方式添加的属性不会被劫持，也就没有get和set方法，视图当然也就无法更新

想要解决这个问题，有如下几种方法：

Vue.set：

Vue.set(vm.obj, propertyName, newValue)

Object.assign:

this.obj = Object.assign({}, this.obj, { a: 1, b: 2 })