Vue3 传值哪种会更好更快?-灵析社区

喵酱魔法师

第一种方式: `App.vue` 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: [ // ... ] } ] } // ... ]); `NavTree.vue` import {getCurrentInstance} from "vue"; defineProps(['navs']); const {proxy} = getCurrentInstance(); const nav_ids = proxy.$route.meta.nav_ids; const ids = inject('ids'); {{val.name}} {{ids}} {{nav_ids}} 第二种方式: `App.vue` 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: [ // ... ] } ] } // ... ]); `NavTree.vue` defineProps(['navs', 'ids', 'nav_ids']); {{val.name}} {{ids}} {{nav_ids}} 上面这两个种 `ids` 和 `nav_ids` 传值, 哪种传值会更快,还是说都一样,如果 `navs` 很多的时候

阅读量:11

点赞量:0

问AI
效率上基本没有区别 * "全局属性" 和 "props" 本质上都对象,都是从对象上取值,不会产生效率上的差异 * "provide/inject" 内部存储上下文状态的数据结构也是对象,无非是给你提供了两个方法来 "get" 和 "set",也就比直接从对象上取值多产生了一些"函数执行"的开销,而这些开销完全可以忽略不计 再说哪种好,技术没有好坏,无论是 "props" or "provide/inject" 都有与之对应的应用场景 * "props" 是 "组件化" 的开发模式下最基础的组件间传值方式 * 而 "provide/inject" 是为了解决 "组件层级" 太深时,通过 props 传值很麻烦的问题,但 "弊端" 是共享状态的方式太隐晦,组件的使用者无法通过 查看组件内部代码/或相关文档 以外的方式了解组件 "provide" 了什么,"inject" 了什么,也就是说 "provide/inject" 会让组件变得不纯,依赖不明确 * "store"(vuex,pinia) 又是为了更好的管理状态而被提出的方案 所以,基于自己项目的体量选择合适的方式即可