vue 热更新的时候，使用 document 获取到的 dom 元素里面包含的内容会消失，但是 ref 获取到的不会消失，这是为什么？为什么在 vue 中获取 dom 使用 ref，而不适用 document，有什么区别吗？

[Pokemon123]

[tanranran]

vue 中的 dom 都是虚拟 DOM 渲染的，在没有渲染完毕之前 document 是获取不到的

[ragnaroks]

ref 到的 DOM，应该是内存里面的虚拟 DOM
document 则是实打实的 DOM，渲染的时候被替换成 <!----> 了

[Pokemon123]

@ragnaroks 也就是说在没有渲染完毕之前，真实的 dom 里面的内容全是<!---->，所以我获取到的 dom 里面的内容是空的？

[xiangyuecn]

setTimeout 解决一切疑难杂症

[Pokemon123]

@xiangyuecn 可以再说的详细一些吗☺？

[ragnaroks]

你看下 vue 的 nexttick 就了解了,有提到 dom

[Pokemon123]

@ragnaroks 好的，谢谢❀

[hongch]

可别听楼上的 setTimeout，是有多大的❤️才会用这个蠢办法

[azcvcza]

ref 里存的应该是 vue 自己的一个对象，有自己的唯一 key 值与实体 dom 做对应，在 vue 更新节点后更新两者之间的联系。setTimeout 的方法是，利用 marco queue 运行比 .nextTick 和 promise 优先级慢的特点，企图在 vue 更新 dom 节点后在去用 document 获取，不是拿不到，html 上的节点怎么可能拿不到。就是不太符合 vue 的思想

[meepo3927]

在 vue 管理下的 dom 节点是会更新的，
比如你用 var nodeNoRef = document.querySelecotr('.xx-node') 拿到一个节点，
vue 触发热更新(或者是 update)之后，上面的 nodeNoRef 就可能已经不在 document 中了，只是一个即将被回收的对象。
解决方法：
1. 每次使用 DOM 都用 Vue 的$ref 获取 ;
2. 在必要时使用$nextTick 。 常见场景：data 更新后，需要立即获取 DOM，可能需要在$nextTick 中来获取 DOM 。

[Pokemon123]

@meepo3927 那我使用$ref 获取 dom 的时候，此时页面上还没有渲染真正的 dom 对吗？