因为vue是响应式的,所以当数据发生变化时,vue会自动检测数据的变化,视图会发生对应的更新。
vue中包含了一组观察数组编译的方法,使用他们改变数组也会触发视图的更新。
push() //往数组最后添加元素
pop() //删除数组中最后一个元素
shift() //删除数组中第一个元素
unshift() //在数组最前面添加元素
splice() //删除元素/插入元素/替换元素
splice(start,length,元素)
删除元素:第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
替换元素:第二个参数,表示我们要替换几个元素,后面是用于替换前面的元素
插入元素:第二个参数,传入0,并且后面跟上要插入的元素
sort() //数组元素排序
reverse() //数组元素位置倒序
这里讲一下哪些数组操作不会引起视图更新?
1.通过索引值修改数组的元素
比如:this.books[0] = "深入浅出vue.js"
解决方法:
1. this.books.splice(0,1,"深入浅出vue.js")//替换
2. Vue.set(要修改的对象,索引值,修改后的值)
Vue.set(this.books,0,"深入浅出vue.js")
或者this.$set(this.books,0,"深入浅出vue.js") (这也是全局 Vue.set 方法的别名)
2.修改数组的长度
this.books.length = 10