英雄联盟网站模板,织梦网站后台logo删除,湖州网站建设湖州,wps的ppt做网站超链接provide和inject是什么
provide 和 inject 是 Vue.js 框架中提供的一种依赖注入机制。这种机制允许一个祖先组件#xff08;提供者#xff09;向其所有子孙组件#xff08;使用者#xff09;提供数据或方法#xff0c;而不需要通过逐层组件传递属性#xff08;props提供者向其所有子孙组件使用者提供数据或方法而不需要通过逐层组件传递属性props。
provide和inject如何使用
provide
类型
function provideT(key: InjectionKeyT | string, value: T): void详细信息 provide 功能允许一个组件定义可供其子孙组件注入的数据。 provide() 接受两个参数第一个参数是要注入的 key可以是一个字符串或者一个 symbol第二个参数是要注入的值。当使用 TypeScript 时key 可以是一个被类型断言为 InjectionKey 的 symbol。InjectionKey 是一个 Vue 提供的工具类型继承自 Symbol可以用来同步 provide() 和 inject() 之间值的类型。 与注册生命周期钩子的 API 类似provide() 必须在组件的 setup() 阶段同步调用。示例代码
script setup
import { ref, provide } from vue
import { fooSymbol } from ./injectionSymbols// 提供静态值
provide(foo, bar)// 提供响应式的值
const count ref(0)
provide(count, count)// 提供时将 Symbol 作为 key
provide(fooSymbol, count)
/script
inject
类型
// 没有默认值
function injectT(key: InjectionKeyT | string): T | undefined// 带有默认值
function injectT(key: InjectionKeyT | string, defaultValue: T): T// 使用工厂函数
function injectT(key: InjectionKeyT | string,defaultValue: () T,treatDefaultAsFactory: true
): T详细信息 inject 功能允许子孙组件接收祖先组件通过 provide 提供的数据。 第一个参数是注入的 key这个key就是用来和provide设定的第一个参数进行匹配。Vue 会遍历父组件链通过匹配 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值那么离得更近的组件将会“覆盖”链上更远的组件所提供的值。如果没有能通过 key 匹配到值inject() 将返回 undefined除非提供了一个默认值。 第二个参数是可选的即在没有匹配到 key 时使用的默认值。 第二个参数也可以是一个工厂函数用来返回某些创建起来比较复杂的值。在这种情况下必须将 true 作为第三个参数传入表明这个函数将作为工厂函数使用而非值本身。 与注册生命周期钩子的 API 类似inject() 必须在组件的 setup() 阶段同步调用。 当使用 TypeScript 时key 可以是一个类型为 InjectionKey 的 symbol。InjectionKey 是一个 Vue 提供的工具类型继承自Symbol可以用来同步provide() 和 inject() 之间值的类型。示例代码
script setup
import { inject } from vue
import { fooSymbol } from ./injectionSymbols// 注入不含默认值的静态值
const foo inject(foo)// 注入响应式的值
const count inject(count)// 通过 Symbol 类型的 key 注入
const foo2 inject(fooSymbol)// 注入一个值若为空则使用提供的默认值
const bar inject(foo, default value)// 注入一个值若为空则使用提供的函数类型的默认值
const fn inject(function, () {})// 注入一个值若为空则使用提供的工厂函数
const baz inject(factory, () new ExpensiveObject(), true)
/script
和响应式数据配合使用
provide和inject也可以传递响应式数据和方法但是传递响应式数据的时候官网做了一个推荐使用当提供 / 注入响应式的数据时**建议尽可能将任何对响应式状态的变更都保持在供给方组件中。**这样可以确保所提供状态的声明和变更操作都内聚在同一个组件内使其更容易维护。
!-- 在提供方组件内 --
script setup
import { provide, ref } from vueconst location ref(North Pole)function updateLocation() {location.value South Pole
}provide(location, {location,updateLocation
})
/script
!-- 在注入方组件 --
script setup
import { inject } from vueconst { location, updateLocation } inject(location)
/scripttemplatebutton clickupdateLocation{{ location }}/button
/template
实现原理
在 Vue 3 中 组件的实例方法和属性的继承不再依赖于原型链而是引入了Composition API它采用了一种不同的方式来组织组件的代码和状态。组件的选项被重构为一个配置对象其中 setup 函数用于定义组件的响应式数据、计算属性、方法等。这些选项不再依赖于原型链而是直接导出给组件实例。
这个改进带来了以下好处
更稳定的数据提供在 Vue 3 中每个组件实例都有自己的私有作用域不会受到原型链的影响因此不存在 Vue 2 中的潜在问题。更好的类型检查在 Vue 3 中TypeScript 或 Flow 等类型检查工具可以更准确地检测到 inject 注入的数据类型。
vue3中的实现原理
provide 的原理
provide 是在父组件中使用的选项用于提供数据给子组件。它实际上是一个函数它会在父组件实例上创建一个名为 _provided 的对象。_provided 对象存储了提供给子组件的数据而且这些数据会在整个组件树中可用子组件可以通过inject选项来访问这些数据。。当父组件提供的数据发生变化时Vue 3 的响应式系统会追踪这些变化并通知所有依赖这些数据的子组件进行更新。
inject 的原理
子组件通过inject选项声明需要注入的数据可以是一个数组、一个对象或一个函数。这些声明告诉Vue 3要从父组件的提供数据中获取哪些属性。当子组件访问通过inject注入的数据时Vue 3会在组件树中向上搜索父组件直到找到包含提供数据的组件或到达根组件。一旦找到包含提供数据的组件Vue 3会从该组件的_provided属性中获取相应的数据。如果提供的数据是响应式的子组件将自动成为这些数据的依赖当提供的数据发生变化时子组件将被通知并进行更新。
