Vue3 使用 自定义 hooks获取dom元素的问题

在自定义hooks的onMounted事件里面 获取ref元素，组件调用hooks的时候必须要传递响应式对象。

分享下楼主自己的观点，代码如下

<script>
// demo.vue
import { defineComponent, ref } from 'vue'
import useBars from './useBars'
export default defineComponent({
    props: {
        Bars: Array,
    },
    setup() {
        const rootRef = ref(null)

        const { currentPageIndex } = useBars(rootRef) // 这里传递过去的是一个响应式对象
		
		 const { currentPageIndex: currentPageIndex1  } = useBars(rootRef) // 这里传递过去的就是一个null，而不是对象
        console.log('组件 setup 最后一段')
        return {
            rootRef,
            currentPageIndex,
        }
    },
})
</script>

// useBar.js
import { onMounted } from 'vue'

export default function useSliders(rootRef) {
	
/**
     * 1. 传递过来是一个响应式对象
     *
     *  传过来是一个响应式对象，调用这个函数的时候rootRef.value = nul
     *  组件实例化完毕，在组件里面 rootRef.value = <div></div>
     *  执行 这个onmonted事件，里面就获取到了一个div，这个onMounted事件是当组件实例化完毕才会执行的
     */

    /**
     *  传过来就是一个null
     *   onMounted 执行的时候自然也是null
     * 
     */

    // ! 感觉是访问同一个地址，如果传递一个响应式对象，然后组件里面给 rootRef.value赋值，这里就也能拿到了


    onMounted(() => {
        // debugger
        console.log('hooks slider mounted --->', rootRef)
    })

    return {}
}```