$set()

由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的

  • Vue 无法检测 data 中属性的添加或移除
  • 对于 data 中属性值为数组,Vue 不能检测以下数组的变动:利用索引直接设置一个数组项,修改数组的长度 如果想在初始化之后动态地添加响应式属性或监听上面数组的变动:使用 $set
this.$set(this.data, 'propName', newValue)

$nextTick()

Vue 在更新 DOM 时是异步执行的,具体流程:
侦听到数据变化 开启一个队列缓冲在同一事件循环中发生的所有数据变更 在下一个事件循环中执行

所以修改一个响应式属性的值之后立即对 DOM 进行访问,此时 DOM 中的值还是旧数据。如果想在数据变更后立刻做一些需要在 DOM 更新之后进行的操作,使用 $nextTick()

this.$nextTick(function () {
  // ...
})