VUE中$set与$nextTick的使用

在VUE的使用中,可能很多开发者都遇到过当改变了数据的时候,视图并没有产生变化,这时就需要用到这两种API来解决了

首先,我们先总结下那些情况下会遇到视图不更新的情况:

1. 为对象新增一个属性

2. 改变数组的长度,交换数组的顺序,利用索引修改数据

另外VUE包装了观察数组的变异方法,它们能触发视图的更新:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

一 数组举例

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

处理办法:

vm.$set(vm.items, indexOfItem, newValue)

this.$set(this.items,1,'x')

二 对象举例

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的

vm.b = 2
// `vm.b` 不是响应式的

解决办法:

Vue.set(vm.userProfile, 'age', 27)

好了,下面看下$nextTick的使用:

三 $nextTick的使用: