vue响应式、dom更新、dom渲染、nextTick、refs之间的联系

1.响应式：

Vue在组件和实例初始化的时候，会将data里的数据进行数据劫持(object.definepropty对数据做处理)。被劫持过后的数据会有两个属性：一个叫getter，一个叫setter。
getter是使用数据的时候触发，setter是在修改数据的时候触发，修改数据的时候触发setter，同时也触发了底层的watcher监听，通知dom更新渲染。

2.虚拟DOM和真实DOM更新

每当进行响应式数据发生变化，Vue就会生成新虚拟DOM树，然后与旧虚拟DOM树比较，从而更新真实DOM树，但是浏览器不会立刻进行真实DOM渲染，而是得先清空微任务队列，再进行DOM渲染
（而Vue的beforeUpdate() 、 update() 、 updated() 、nextTick() 都属于微任务）

3.DOM更新时机：

然而，注意 DOM 的更新并不是同步的。相反，Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论进行了多少次状态更改，每个组件都只更新一次。

4.nextTick

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它的时机：在DOM更新之后，DOM渲染之前。

5.$refs

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。