干货来了,vue 3.0 自定义指令变化

重新设计定制的指令,使其更好地符合组件生命周期

组件上的自定义指令使用将遵循与行为属性中讨论的相同规则。它将通过由子组件控制。

使自定义指令挂钩名称与组件生命周期更加一致。

Usage on Components

在中,通过片段支持,组件可能有多个根节点。当在具有多个根节点的组件上使用自定义指令时,就会产生问题。

为了解释自定义指令如何在组件上工作的细节,我们需要首先理解自定义指令是如何在中编译的。对于这样的指令:

被编译成

其中将是由用户编写的指令对象,它包含挂载和更新这样的钩子。

返回一个克隆的,将用户钩子封装并注入为生命周期钩子(更多细节请参见渲染函数API的变化):

因此,自定义指令作为VNode数据的一部分完全包括在内。当在组件上使用自定义指令时,这些钩子作为无关的道具向下传递到组件,并最终出现在这个中。

这也意味着可以像模板一样直接连接到元素的生命周期中,这在定制指令太复杂的时候很方便:

这与中讨论的属性行为一致。因此,组件上的定制指令规则与其他无关属性相同:由子组件决定在何处以及是否应用它。当子组件在内部元素上使用时,它也会应用在它上面的任何定制指令

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200828A0S0W900?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券