Typescript 如何在第一次加载组件时加载ref数组

在onMounted lifecycle hook中初始化并填充此数组应有助于确保google.maps.marker.AdvancedMarkerElement objects的react 式数组在Vue 3 component的第一次加载时被填充.

这将保证在组件安装到DOM之后填充数组，这对于涉及操作或等待外部资源(如Google Maps)的操作来说很重要.

┌─────────────┐      ┌──────────────────────┐      ┌─────────────┐
│             │      │                      │      │             │
│   Created   │─────>│    onMounted         │─────>│   Mounted   │
│             │      │ (populateMarcadores) │      │             │
└─────────────┘      └──────────────────────┘      └─────────────┘
                                │
                                ▼
                        ┌─────────────────┐
                        │                 │
                        │ Populate array  │
                        │    marcadores   │
                        │                 │
                        └─────────────────┘

这意味着将填充marcadores数组的逻辑移动到onMounted生命周期钩子中调用的函数中:将填充逻辑重构为函数:

import { onMounted, ref } from 'vue';

let marcadores = ref([]);

function populateMarcadores(localizaciones) {
    localizaciones.forEach((localizacion) => {
        // Your existing logic for populating each marker
        // 
        marcadores.value.push(advancedMarker);
        // Add event listener and other logic
        // 
    });
}

然后在onMounted钩子内调用populateMarcadores:

onMounted(() => {
    // Assuming `localizaciones` is available at this point
    populateMarcadores(localizaciones);
});

After making sure the array is populated on component mount, you can access the filtered or manipulated version of this array as needed in your component.
For example, to filter this array for favorite markers:

import { computed } from 'vue';

const favoriteMarkers = computed(() => {
    return marcadores.value.filter(marker => /* your condition for favorites */);
});

依赖于已填充的marcadores数组的任何操作都必须在数组填充之后执行.这通常意味着访问模板内的数组、计算(computed)属性或方法，这些方法由用户交互或onMounted钩子初始填充后发生的其他react 性变化触发.