Vue 不调用 onMounted 钩子

Question

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

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,
    };
}

App.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>

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

Answer 1

onMounted是一个钩子注册函数。

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

[强调我的]

Docs

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

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

内部使用