数组即刻变更方法
Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
注意事项
由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。深入响应式原理中有相关的讨论。
如项目KTV点歌单,点击向上或向下时,vue不能检测更新并渲染识图!!
解决方法
Vue.set( target, propertyName/index, value )
参数:
{Object | Array} target
{string | number} propertyName/index
{any} value
用法:
向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = ‘hi’)
点歌单向上或向下demo
methods: {
down(i){
let temp = this.list[i]
this.$set(this.list,i,this.list[i+1])
this.$set(this.list,i+1,temp)},
up(i){
let temp = this.list[i]
this.$set(this.list,i,this.list[i-1])
this.$set(this.list,i-1,temp)} },
划重点!!
向下变更
1.this.
s
e
t
(
t
h
i
s
.
l
i
s
t
,
i
,
t
h
i
s
.
l
i
s
t
(
i
+
1
)
)
把
i
+
1
的
值
给
到
i
等
同
于
t
h
i
s
.
l
i
s
t
=
t
h
i
s
.
l
i
s
t
(
i
+
1
)
2.
t
h
i
s
.
set(this.list , i ,this.list(i+1)) 把i+1的值给到i 等同于 this.list = this.list(i+1) 2.this.
set(this.list,i,this.list(i+1))把i+1的值给到i等同于this.list=this.list(i+1)2.this.set(this.list,i+1,temp)}, 把temp的值给到i+1
等同于 this.list[i+1] = temp