setup中ref传递与获取

首页课程实战体系课手记专栏慕课教程

setup中ref传递与获取

来源：2-6 【讨论题】获取轮播图接口数据

慕粉0025232718

2021-04-20

我观察到
1.scroll组件中是在setup函数中定义了rootRef，并传入useScroll中，最后是在setup中返回了rootRef；
2.index-list中，是在composition中先定义了groupRef = ref(null,);然后通过watch调用的calculate中，可以拿到响应式的groupRef，最后再composition中返回了groupRef
我自己调试了下，两种方法，只有在onMounted 等生命周期或watch监听函数中才可以获取到rootRef节点

我想问的是这两者传递方式有什么区别，哪种方式更好一些，老师采取了两种不同的方式是基于什么考虑？
还想深入的了解下 setup的执行时机是怎么样的，为什么第一种在return rootRef之前打印rootRef仍然是null，并且两种都只能在钩子函数中拿到rootRef或groupRef节点？

写回答

1回答

ustbhuangyi

ustbhuangyi

2021-04-20

已采纳

两种方式都可以，只要保证是响应式数据即可。 setup 是如何执行的建议看一下我在拉勾的 Vue.js 3.0 源码分析课程，里面详细讲了，而且 DOM ref 有值一定是在 mounted 之后

1

2

慕粉0025232718

老师，我看完3-8的视频有点疑惑，ref有值在mounted之后，我调试时发现useFixed中onMounted 可以打印到ref,而useShortcurt不传ref参数，也在onMounted中打印却是null

2021-04-22

共2条回复

Vue3开发企业级音乐Web App 明星讲师带你学大厂代码

慕课网明星讲师黄轶深度讲解 Vue3.0 ，提升的不止是Vue代码能力

2223 学习 · 1002 问题

相似问题

轮播图中为什么setup中ref()可以拿到模板中的rootRef

回答 1

vue3.2中setup语法糖写的组件如何获取name？我通过Comp.name获取是空的

回答 1

为什么slider= ref（null）传一个null值

回答 1

迷你播放器组件用到的部分数据player组件中已经有了，为啥不直接通过props传递，而是又重新获取一次？

回答 2

这个不用高阶组件,可以实现吗

回答 2

打开慕课网App查看更多内容