$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 () {
// ...
})