vue 热更新的时候，使用 document 获取到的 dom 元素里面包含的内容会消失，但是 ref 获取到的不会消失，这是为什么？为什么在 vue 中获取 dom 使用 ref，而不适用 document，有什么区别吗？
Pokemon123 · 2020-11-04 17:07:38 +08:00 · 1886 次点击这是一个创建于 1505 天前的主题，其中的信息可能已经有所发展或是发生改变。
 |
1
tanranran 2020-11-04 17:11:32 +08:00
vue 中的 dom 都是虚拟 DOM 渲染的，在没有渲染完毕之前 document 是获取不到的
|
 |
2
ragnaroks 2020-11-04 17:12:17 +08:00
ref 到的 DOM，应该是内存里面的虚拟 DOM
document 则是实打实的 DOM，渲染的时候被替换成 <!----> 了 |
 |
3
Pokemon123 OP @ragnaroks 也就是说在没有渲染完毕之前，真实的 dom 里面的内容全是<!---->，所以我获取到的 dom 里面的内容是空的？
|
 |
4
xiangyuecn 2020-11-04 17:31:18 +08:00
setTimeout 解决一切疑难杂症
|
|
5
Pokemon123 OP @xiangyuecn 可以再说的详细一些吗☺？
|
|
6
ragnaroks 2020-11-04 17:37:42 +08:00
你看下 vue 的 nexttick 就了解了,有提到 dom
|
|
7
Pokemon123 OP @ragnaroks 好的，谢谢❀
|
 |
8
hongch 2020-11-05 10:24:08 +08:00
可别听楼上的 setTimeout，是有多大的❤️才会用这个蠢办法
|
 |
9
azcvcza 2020-11-05 10:31:37 +08:00
ref 里存的应该是 vue 自己的一个对象，有自己的唯一 key 值与实体 dom 做对应，在 vue 更新节点后更新两者之间的联系。setTimeout 的方法是，利用 marco queue 运行比 .nextTick 和 promise 优先级慢的特点，企图在 vue 更新 dom 节点后在去用 document 获取，不是拿不到，html 上的节点怎么可能拿不到。就是不太符合 vue 的思想
|
 |
10
meepo3927 2020-11-05 11:21:23 +08:00
在 vue 管理下的 dom 节点是会更新的，
比如你用 var nodeNoRef = document.querySelecotr('.xx-node') 拿到一个节点， vue 触发热更新(或者是 update)之后，上面的 nodeNoRef 就可能已经不在 document 中了，只是一个即将被回收的对象。 解决方法： 1. 每次使用 DOM 都用 Vue 的$ref 获取 ; 2. 在必要时使用$nextTick 。 常见场景：data 更新后，需要立即获取 DOM，可能需要在$nextTick 中来获取 DOM 。 |
|
11
Pokemon123 OP @meepo3927 那我使用$ref 获取 dom 的时候，此时页面上还没有渲染真正的 dom 对吗？
|
Select Language