setup中ref传递与获取

Question

我观察到
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节点？

Answer 1

ustbhuangyi 2021-04-20 16:12:43

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

• 提问者 慕粉0025232718 #1

  哈哈，等我学习完这个，就去看源码分析

• 提问者 慕粉0025232718 #2

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