Custom Directive API Change about core HOT 6 CLOSED

@posva I just realized in v3 directives are in fact implemented as special VNode data hooks - that is to say in render functions you can do this:

h('div', {
  vnodeMounted() { ... },
  vnodeUpdated() { ... }
})

And for template <div v-foo/>, it will take the mounted hook of v-foo and merge it into the VNode as vnodeMounted.

So they would be also included in the child component's this.$attrs. If the child component does not bind $attrs, the directive is ignored just like other extraneous attributes; if the child binds $attrs, it binds the custom directives as well. This makes it consistent with the new attr fallthrough behavior. WDYT?

from core.

I think it will make sense to still support directives on components, even if we receive an array of elements. Some DOM manipulations like v-focus or v-clickaway are still valid for components. This will also make the adoption strategy a bit harder

from core.

@posva making the first argument Element | Array<Element> is still a breaking change, in fact it requires heavier refactoring to make sure existing directives work properly. It's also not clear what a directive should do in the case of receiving multiple elements: what should v-focus or v-clickaway do in such cases? Implicitly failing seems like a bad idea.

from core.

making the first argument Element | Array is still a breaking change, in fact it requires heavier refactoring to make sure existing directives work properly

True, but it isn't much for existing directives to just extract the first element and throw if there are more (thinking of a possible codemod)

const [el] = elements
if (elements.length > 1) throw new Error()

For example, v-focus could lookup an input/select/button or explicitly tab-indexed element. For clickaway it could look up a data attribute.

But my point is, recreating those features with components is way more verbose:

<Focus>
  <v-text-field/>
</Focus>

or isn't declarative:

<v-text-field ref="mainInput"/>

this.$refs.mainInput.focus() // a component method

from core.

Just thinking out loud: Would this be achievable? And if so, would it make any sense? Would make the implementation treeshakable, right?

import {
  beforeMount,
  mounted,
  beforeUpdate,
  update,
  beforeUnmount,
  unmounted,
} from 'vue/directives'

export default () => {
  mounted((el, binding, vnode, prevVnode) => {
    // do stuff
  })
}

from core.

Revised and published: vuejs/rfcs#32

from core.