Vue3.0版本:依赖注入的用法,模板refs的用法,类型推断函数用法

本文详细介绍了Vue3.0中的依赖注入机制,包括provide和inject的使用,以及如何通过ref实现响应式注入。同时,探讨了模板refs的响应式特性,展示了在不同场景下的应用,如在渲染函数和v-for中的使用,并强调了refs在模板中的行为。此外,还提及了createComponent函数在类型推断中的作用。
摘要由CSDN通过智能技术生成

  

Vue3.0版本:依赖注入的用法,模板refs的用法,类型推断函数用法

  依赖注入

  Vue3.0依赖注入方式 provide和inject的用法类似于2.x的选项 provide/inject。两者都只能在当前激活实例setup()中调用。

  

Vue3.0版本:依赖注入的用法,模板refs的用法,类型推断函数用法

  inject接受可选的默认值(比如 light)作为第二个参数。如果未提供默认值且在提供上下文中找不到该属性,则inject返回undefined。

  响应式注入

  为了维持 provide和inject之间值的响应式,可使用ref:

  

Vue3.0版本:依赖注入的用法,模板refs的用法,类型推断函数用法

  图中后代 ${theme.value}随着 祖先 themeRef 的改变而改变。

  另外,如果注入的是响应式对象,也可以实现响应式追踪。

  模板refs

  使用Composition API时,响应式refs和模板refs的概念是一致的。为了获取模板元素或组件实例的引用,我们可以像往常一样声明一个 ref 并从setup()返回:

  

Vue3.0版本:依赖注入的用法,模板refs的用法,类型推断函数用法

  将root暴露给渲染上下文并通过 ref="root"将其绑定到div上。在Virtual DOM修补算法中,在Virtual DOM算法里,如果一个VNode节点的ref键与渲染上下文中的ref对应,那么VNode节点对应的元素或组件实例将被赋值给当前ref的value。只能在Virtual DOM挂载mount或patch阶段才有此表现行为,因此只有初始化渲染后才能给模板refs赋值。

  refs用作模板时的表现与其他refs一致:它们是响应式的,可以传递给composition函数(或从composition函数返回)。

  渲染函数 / JSX的用法

  

Vue3.0版本:依赖注入的用法,模板refs的用法,类型推断函数用法

  v-for内用法:

  

Vue3.0版本:依赖注入的用法,模板refs的用法,类型推断函数用法

  createComponent 函数

  此函数仅用于类型推断。使TypeScript知道一个对象应该是一个组件定义,这样才能推断传递给setup()的props的类型。

  

Vue3.0版本:依赖注入的用法,模板refs的用法,类型推断函数用法

  完结。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值