记一次 Vue3 中 ref 初始化未完成导致方法未触发的解决方案

在 Vue3 开发过程中，我们经常会使用 ref 来管理组件实例，便于调用子组件的方法。然而，在实际开发中，有时会遇到 ref 尚未初始化完成导致子组件方法未能及时触发的问题。

本文以一个典型场景为例，分析问题产生的原因并提供解决方案。

问题描述

在项目中，我们使用了多个 <GeneralChart /> 子组件，通过 ref 来调用子组件的 getData 方法以加载数据。

👇 代码如下：

// 定义组件ref
const buyingScenariosRef= ref()
const useOfSpaceRef= ref()
const usageScenariosRef= ref()const searchData = async() => {if (['冰箱'].includes(queryParams.value.productLine[0])) {buyingScenariosRef.value?.getData(unref(queryParams.value))useOfSpaceRef.value?.getData(unref(queryParams.value))usageScenariosRef.value?.getData(unref(queryParams.value))}
}

然而，在页面首次加载时，由于组件没有挂载，导致buyingScenariosRef.value 返回 undefined，从而导致 getData 方法未能调用成功。进一步调试发现，问题出在 ref 的初始化未完成。

原因分析

Vue3 中的 ref 是响应式的，其值在组件挂载后才会初始化完成。当我们在 setup 函数中直接使用 ref 调用方法时，可能会出现子组件尚未渲染完成，而 ref.value 还未赋值的情况。

👇 以下是问题的关键点：

生命周期顺序：Vue 在组件挂载时会先完成父组件的 setup，然后再渲染子组件。因此，在 setup 内直接调用子组件方法可能会导致 ref 未完成初始化。
异步特性：ref 的值更新是异步的，在 DOM 尚未完全生成时，ref 值会为 undefined。

解决方案

为了解决这个问题，我们可以通过以下方式确保 ref 的值在调用前已经初始化：

方法一：使用 `nextTick`

Vue 提供的 nextTick 方法可以确保在 DOM 更新完成后执行逻辑。修改代码如下：

import { nextTick } from 'vue'const searchData = () => {nextTick(() => {if (['冰箱'].includes(queryParams.value.productLine[0])) {buyingScenariosRef.value?.getData(unref(provideQueryParams))useOfSpaceRef.value?.getData(unref(provideQueryParams))usageScenariosRef.value?.getData(unref(provideQueryParams))}})
}

nextTick 会等待 Vue 更新完成后再执行回调函数，从而确保 ref 已初始化。

方法二：使用 `onMounted`

将 ref 的操作延迟到组件的 onMounted 生命周期钩子中。在 onMounted 中，所有子组件已经渲染完成，ref 也已完成初始化：

import { onMounted } from 'vue'onMounted(() => {searchData()
})

方法三：添加延迟渲染逻辑

为避免在 ref 未完成初始化时调用方法，可以通过一个布尔值标志位，控制数据加载逻辑：

const isReady = ref(false)const searchData = () => {if (!isReady.value) returnif (['冰箱'].includes(queryParams.value.productLine[0])) {buyingScenariosRef.value?.getData(unref(provideQueryParams))useOfSpaceRef.value?.getData(unref(provideQueryParams))usageScenariosRef.value?.getData(unref(provideQueryParams))}
}onMounted(() => {isReady.value = truesearchData()
})

最佳实践总结

尽量避免在 setup 内直接调用 ref 的方法。 使用 onMounted 或 nextTick 确保子组件已加载完成。
对 ref 进行 null 或 undefined 检查。 在调用方法前，确保 ref 值已被正确赋值。
利用状态管理和事件机制。 在复杂项目中，考虑使用 Pinia 或 Vuex 管理数据状态，通过事件驱动的方式通知子组件更新数据。

代码重构示例

以下是一个经过优化的完整代码片段：

import { ref, nextTick, onMounted, unref } from 'vue'const buyingScenariosRef = ref()
const useOfSpaceRef = ref()
const usageScenariosRef = ref()const searchData = () => {nextTick(() => {if (['冰箱'].includes(queryParams.value.productLine[0])) {buyingScenariosRef.value?.getData(unref(provideQueryParams))useOfSpaceRef.value?.getData(unref(provideQueryParams))usageScenariosRef.value?.getData(unref(provideQueryParams))}})
}onMounted(() => {searchData()
})