Nuxt项目中如何在Vue组合式函数内获取模板Ref且无需onMounted？

问题根源 #

• 组合式内单独声明的ref和组件模板绑定的ref是两个独立对象，无法关联到同一个DOM元素
• 直接传入element.value时，setup执行阶段DOM尚未挂载，值为null；且传递的是原始值而非ref对象，后续DOM挂载后组合式函数无法感知值的变化

可行方案 #

方案1：传递ref对象并监听变化 #

在组件中声明ref后，将整个ref对象传入组合式函数，通过watch监听其值的变化：

组件代码（/components/Component.vue）：

<template>
  <div ref="element">...</div>
</template>

<script setup>
import { ref } from 'vue'
import { useComposable } from '~/composables/useComposable'

const element = ref(null)
useComposable(element)
</script>

组合式函数代码（/composables/useComposable.js）：

import { watch } from 'vue'

export const useComposable = (elementRef) => {
  watch(elementRef, (el) => {
    if (el) {
      // 此处可安全操作DOM元素
      console.log('DOM元素已挂载:', el)
    }
  }, { immediate: true }) // 立即执行一次，覆盖DOM已提前挂载的场景
}

方案2：使用watchEffect自动追踪依赖 #

利用watchEffect自动追踪elementRef.value的变化，无需手动指定监听源：

组合式函数代码修改为：

import { watchEffect } from 'vue'

export const useComposable = (elementRef) => {
  watchEffect(() => {
    const el = elementRef.value
    if (el) {
      // 操作DOM逻辑
      console.log('DOM元素就绪:', el)
    }
  })
}

优势说明 #

这两种方式无需依赖onMounted，且能处理动态渲染场景（比如通过v-if控制元素显示/隐藏），当元素重新挂载时会自动触发逻辑，比onMounted更灵活。

内容的提问来源于stack exchange，提问作者giannicash