重新设计定制的指令API
,使其更好地符合组件生命周期
组件上的自定义指令使用将遵循与Fallthrough
行为RFC
属性中讨论的相同规则。它将通过v-bind="$attrs"
由子组件控制。
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() {}
}
使自定义指令挂钩名称与组件生命周期更加一致。
在3.0
中,通过片段支持,组件可能有多个根节点。当在具有多个根节点的组件上使用自定义指令时,就会产生问题。
为了解释自定义指令如何在3.0
组件上工作的细节,我们需要首先理解自定义指令是如何在3.0
中编译的。对于这样的指令:
<div v-foo="bar"></div>
被编译成
const vFoo = resolveDirective('foo')
return withDirectives(h('div'), [
[vFoo, bar]
])
其中vFoo
将是由用户编写的指令对象,它包含挂载和更新这样的钩子。
withdirective
返回一个克隆的VNode
,将用户钩子封装并注入为VNode
生命周期钩子(更多细节请参见渲染函数API的变化):
{
onVnodeMounted(vnode) {
// call vFoo.mounted(...)
}
}
因此,自定义指令作为VNode数据的一部分完全包括在内。当在组件上使用自定义指令时,这些onVnodeXXX
钩子作为无关的道具向下传递到组件,并最终出现在这个.$attrs
中。
这也意味着可以像模板一样直接连接到元素的生命周期中,这在定制指令太复杂的时候很方便:
<div @vnodeMounted="myHook" />
这与vuejs/rfcs#26
中讨论的属性fallthrough
行为一致。因此,组件上的定制指令规则与其他无关属性相同:由子组件决定在何处以及是否应用它。当子组件在内部元素上使用v-bind="$attrs"
时,它也会应用在它上面的任何定制指令