响应式 responsive
- 描述:属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的
- vnode->function|component|render ->watcher -> data -dom
Vue.set()
可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性
this.$set(this.someObject,'b',2)
//Object.assign(this.someObject, { a: 1, b: 2 })
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
异步更新队列
- tick 标记
- 可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用
this.$nextTick(()=>{})
await this.$nextTick() // 返回一个 Promise 对象
updateMessage: async() =>{
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
await this.$nextTick()
console.log(this.$el.textContent) // => '已更新'
}