vue2之响应式双向绑定,在对象或数组新增属性页面无响应的情况

在Vue2中，通过响应式绑定的方式，可以实现数据与页面的双向绑定，非常方便。但是，在使用过程中，如果对象或数组新增属性时，页面没有作出响应，可能会出现一些问题。

这种情况通常是因为Vue只会对已经存在的属性进行监控，而无法监控新增的属性。为了解决这个问题，我们需要通过一些方法，手动将新增的属性添加到Vue的监控列表中。

1. 使用Vue.set()方法

Vue提供了一个方法Vue.set()，可以将对象或数组的新属性添加为响应式属性，以便在数据变化时更新视图。例如：

Vue.set(vm.someObject, 'newProperty', 123)

这个方法的第一个参数是要操作的对象，第二个参数是新属性的名称，第三个参数是新属性的值。

1. 使用this.$set()方法

在Vue实例中，可以使用this.$set()方法实现与Vue.set()方法相同的效果，例如：

this.$set(this.someObject, 'newProperty', 123);

在数组中添加新元素也可以使用以上两个方法，将数组索引作为第一个参数，例如：

Vue.set(vm.someArray, index, newValue)
this.$set(this.someArray, index, newValue)

以上两个方法可以保证新增属性满足响应式绑定，页面可以及时更新。