Hi，sam老师。

Question

请问下，vue的ref是操作的真实dom还是说操作虚拟dom再映射到真实dom上？谢谢，新年快乐！

Answer 1

Sam 2020-01-01 11:00:01

hi，寂寞同学，元旦快乐。回答你的问题：

vue 的 ref 返回的是 VueComponent 或 DOM 对象，它的初始化在 patch 阶段，源码如下：

var ref = vnode.componentInstance || vnode.elm;

可以看到如果 vnode 是一个 Component，那么 ref 会获取 vnode.componentInstance，这是因为 ref 可能是组件的一个属性，这时会返回 VueComponent 对象。如果 vnode 是普通 DOM，那么会返回 vnode.elm，vnode.elm 存储的是真实 DOM 不是虚拟 DOM，打个断点测试如下代码：

vnode.elm instanceof Node // true

可以看到 vnode.elm 实际是真实 DOM。

希望可以帮到你！

• 提问者 寂寞追不上我 #1

  谢谢Sam老师，也就是说通过ref操作dom和直接获取dom进行操作性能基本没有区别？

• Sam 回复 提问者 寂寞追不上我 #2

  是的，没区别