Vue3 传值哪种会更好更快？

第一种方式：

App.vue

<script setup>
import NavTree from "@/components/NavTree.vue";
import {ref} from "vue";

const ids = ref([1,2,3,4,5,6]);
provide('ids', ids);

// 这个 navs 有好几百个
const navs = ref([
    {
        id: 1,
        parent_id: 0,
        name: '名称1',
        children: [
            {
                id: 2,
                parent_id: 1,
                name: '名称2',
                children: [
                    // ...
                ]
            }
        ]
    }
    // ...
]);
</script>

<template>
    <NavTree :navs="navs" />
</template>

NavTree.vue

<script setup>
import {getCurrentInstance} from "vue";

defineProps(['navs']);

const {proxy} = getCurrentInstance();
const nav_ids = proxy.$route.meta.nav_ids;

const ids = inject('ids');
</script>

<template>
    <div v-for="(val, index) in navs" :key="index">
        <p>{{val.name}} {{ids}} {{nav_ids}}</p>
        <NavTree :navs="val.children" />
    </div>
</template>

第二种方式：

App.vue

<script setup>
import NavTree from "@/components/NavTree.vue";
import {ref} from "vue";

const ids = ref([1,2,3,4,5,6]);

// 这个 navs 有好几百个
const navs = ref([
    {
        id: 1,
        parent_id: 0,
        name: '名称1',
        children: [
            {
                id: 2,
                parent_id: 1,
                name: '名称2',
                children: [
                    // ...
                ]
            }
        ]
    }
    // ...
]);
</script>

<template>
    <NavTree :navs="navs" :ids="ids" :nav_ids="$route.meta.nav_ids" />
</template>

NavTree.vue

<script setup>
defineProps(['navs', 'ids', 'nav_ids']);
</script>

<template>
    <div v-for="(val, index) in navs" :key="index">
        <p>{{val.name}} {{ids}} {{nav_ids}}</p>
        <NavTree :navs="val.children" :ids="ids" :nav_ids="nav_ids" />
    </div>
</template>

上面这两个种 ids 和 nav_ids 传值， 哪种传值会更快，还是说都一样，如果 navs 很多的时候