Vue: Custom directive binds differs on components vs elements

Created on 15 Apr 2019 · 6Comments · Source: vuejs/vue

Version

2.6.10

Reproduction link

https://jsfiddle.net/bponomarenko/uom10qd2/

Steps to reproduce

Open browser console.
Click on Toggle button two times.

What is expected?

Directive will emit the same console messages when applied to DOM elements and to components (on init and after click on button).

I'm not sure what should be expected output. Either

bind: first comp
bind: first elem
unbind: first comp
unbind: first elem
bind: first comp
bind: first elem

bind: first comp
bind: first elem
unbind: second comp
unbind: second elem
bind: first comp
bind: first elem

What is actually happening?

Messages from the directive are the same on init, but different after button have been clicked.

Actual console output:

bind: first comp
bind: first elem
unbind: first comp
unbind: second elem
bind: second comp
bind: first elem

It seems that order in which directives are applied to DOM elements and components are different. In my setup I have custom directive which relies on some DOM attribute with configuration data. When this custom directive is bound/unbound in a "regular flow" – everything works as expected (directive binds after element attributes are updated). However when directive is bound/unbound in case of Vue "in-place patch strategey", behavior seems to be different.

bug has workaround

Source

bponomarenko

Most helpful comment

Seems like the directive is called with the old component (because it's reused) but it still has old attrs

As a workaround, set a key on one of the components

posva on 15 Apr 2019

👍2 🚀1

All 6 comments

Seems like the directive is called with the old component (because it's reused) but it still has old attrs

As a workaround, set a key on one of the components

posva on 15 Apr 2019

👍2 🚀1

@bponomarenko
What @posva said is already covered in the documentation.
You can refer to this.

https://vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key

pistis on 15 Apr 2019

@posva @pistis Thanks for the answer. Yeah, that is what we used eventually as a workaround, I had to mention that in the ticket. However presence of key attribute will not allow to use Vue.js rendering optimisations. Would be great to have it fixed.

bponomarenko on 16 Apr 2019

The optimization is based on that you have stateless elements so Vue won’t bother to take care of correctly managing event handlers or local states when trying to reuse an element. So I think this is not a bug but can be potentially improved in our docs so that our users can understand this more easily.

Justineo on 16 Apr 2019

@Justineo I understand the concepts behind an optimization itself. In my situation, custom directive is responsible for adding the state attribute to element on bind and removing that attribute on unbind. And directive is perfectly added/removed when component is re-used by Vue.js. However order of component properties update and directive initialization is different in different moments of component lifetime, which makes it hard to develop custom directives.
Indeed additional documentation on these optimization techniques might be helpful, but inconsistent directives lifecycle events are rather a bug to fix in my opinion.

bponomarenko on 16 Apr 2019

👍1