前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >干货来了,vue 3.0 自定义指令变化

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

作者头像
公众号---人生代码
发布2020-09-07 15:12:01
1.4K0
发布2020-09-07 15:12:01
举报
文章被收录于专栏:人生代码

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

组件上的自定义指令使用将遵循与Fallthrough行为RFC属性中讨论的相同规则。它将通过v-bind="$attrs"由子组件控制。

代码语言:javascript
复制
const MyDirective = {
  bind(el, binding, vnode, prevVnode) {},
  inserted() {},
  update() {},
  componentUpdated() {},
  unbind() {}
}
after

const MyDirective = {
  beforeMount(el, binding, vnode, prevVnode) {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {}, // new
  unmounted() {}
}

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

Usage on Components

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

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

代码语言:javascript
复制
<div v-foo="bar"></div>

被编译成

代码语言:javascript
复制
const vFoo = resolveDirective('foo')

return withDirectives(h('div'), [
  [vFoo, bar]
])

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

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

代码语言:javascript
复制
{
  onVnodeMounted(vnode) {
    // call vFoo.mounted(...)
  }
}

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

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

代码语言:javascript
复制
<div @vnodeMounted="myHook" />

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-08-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 CryptoCode 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Usage on Components
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档