Vue 不调用 onMounted 钩子

Question

我有两个组件，一个是管理数据，另一个是vue模板。我在这里简化了它们。问题是，当位置通过 fetch 传入时，locationsvue 模板中的 保持为空。我已经检查过isRef()并返回 true，但它只是一个空数组。查看 Vue 开发工具面板，数组中locations 确实有元素。

地点.js

import {
    ref,
    isRef,
    onMounted,
} from 'vue';


export default function useLocations () {
    const locations = ref([]);

    const loadImageData = (locId) => {
        
        isRef(locations); // === true
        
        // @FIXME locations.value is always empty here.
        locations.value.forEach( (loc,key) => {
            console.debug( loc.id, locId )
        })
    };

    const getLocations = async () => {
        const locs = await apiFetch({ path: '/wp/v2/tour-location'});
        locations.value = locs;
    };

    onMounted( getLocations );

    return {
        locations,
        getLocations,
        loadImageData,
    };
}

应用程序.vue

<template>
    <div class="location">
        <h1>{{ location.name }}</h1>
        <img :src="location.main_image" />
    </div>
</template>

<script>

import useLocations from '@/composables/Locations';

export default {
    name: 'Location',
    props: [,'location'],
    data () {return {}},
    watch: {
        location: {
            // deep: true,
            immediate: true,
            handler: function(){
                const { loadImageData } = useLocations();
                loadImageData( location.id );
            }
        }
    },
}
</script>

当loadImageData()从组件调用时Location.vue，locations始终是一个空数组。为什么它没有像应用程序中其他地方那样在该功能中得到更新？

Answer 1

onMounted是一个钩子注册函数。

这些生命周期钩子注册函数只能在 期间同步 setup()使用，因为它们依赖内部全局状态来定位当前活动实例（setup()当前正在被调用的组件实例）。在没有当前活动实例的情况下调用它们将导致错误。

[强调我的]

文档

当您在外部使用useLocations组合函数时setup()，您的getLocations函数永远不会被调用并且locations始终为空数组

进一步解释一下。您不必直接在 内部调用onMounted（或任何其他钩子注册函数）。将该调用放置在任何组件外部的单独组合函数中（就像您所做的那样）是完全可以的，但是必须从组件内部使用该函数 setup()setup()