由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。但是Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括::
push(),pop(),shift(),unshift(),splice(),sort(),reverse()
而通过直接修改数组某一项的值或者改变数组的length,vue不能监听到数组变化。
app.book[3] = 'xxxx';
// or
app.books.length =1;
因为vue实现双向数据绑定的机制是数据劫持,也就是在所有对象上有个Object.defineProperty()方法,通过监听set,get方法去实现,而数组没有这两个方法,所以就不会更新view;解决方案就是,需要我们主动通知vue。
👉 Vue.set( target, propertyName/index, value )
我们可以使用官方给出的方案来通知视图更新:
// 在this实例上通知
this.$set(this.aas,3,this.aas[3])
// or 在全局对象上通知
Vue.set(this.aas,3,this.aas[3])
也可以使用vue可以监听到的数组方法 splice来解决:
👉 splice用法
this.aas.splice(3,1,"444");
// or
this.aas.splice(0);
这些在vue官方文档中都是有说明哒~可以去官方文档看看详细介绍