vue3 - Vue3 传值哪种会更好更快？

Question

第一种方式：

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 很多的时候

Answer 1

速度，内部都是对组件实例属性的 get 操作，我认为是一样快的
优势，就是 inject 的使用范围肯定大于 prop的，但两者都局限于组件，不能脱离组件使用

Answer 2

效率上基本没有区别

• 全局属性 和 props 本质上都对象，都是从对象上取值，不会产生效率上的差异
• provide/inject 内部存储上下文状态的数据结构也是对象，无非是给你提供了两个方法来 get 和 set，也就比直接从对象上取值多产生了一些函数执行的开销，而这些开销完全可以忽略不计

再说哪种好，技术没有好坏，无论是 props or provide/inject 都有与之对应的应用场景

• props 是 组件化 的开发模式下最基础的组件间传值方式
• 而 provide/inject 是为了解决 组件层级 太深时，通过 props 传值很麻烦的问题，但 弊端 是共享状态的方式太隐晦，组件的使用者无法通过 查看组件内部代码/或相关文档 以外的方式了解组件 provide 了什么，inject 了什么，也就是说 provide/inject 会让组件变得不纯，依赖不明确
• store(vuex，pinia) 又是为了更好的管理状态而被提出的方案

所以，基于自己项目的体量选择合适的方式即可