vm.$refs.xxx拿到的是一个对象还是一个数组?

185 阅读1分钟

1、vm.$refs.xxx拿到的是一个对象还是一个数组?

对于这个问题,我之前总以为的答案是

“有同名的key的,拿到的就是一个数组;否则就是一个对象”

但在我给ref加了个id的时候,拿到的仍旧是一个数组时,我:

image.png

这让我翻起了vue的源码,发现vm.$refs.xxx是一个数组还是一个对象,跟同不同名,并没有什么关系:

image.png

对于v-for和ref的热血组合技,vue会给vnode.data.refInFor赋值为true,并强制将其值换成一个数组;哪怕他的键是唯一的。

而对于其他场景下的vm.$refs.xxx,则是组件vnode就赋值组件实例,否则就是dom对象;且会是新的覆盖旧的。

2、ref的处理时机

因为ref和v-show、v-if一样,都是vue内置的指令。

而对于指令,vue又是在patch处理的;那么早于mounted时机的钩子,都是访问不到vm.$refs.xxx的

created

image.png

beforeMount

image.png

mounted

image.png