Vue: Los enlaces de directivas personalizadas difieren en componentes y elementos

Creado en 15 abr. 2019 · 6Comentarios · Fuente: vuejs/vue

Versión

2.6.10

Enlace de reproducción

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

pasos para reproducir

Abra la consola del navegador.
Haga clic en el botón Alternar dos veces.

¿Lo que es esperado?

La directiva emitirá los mismos mensajes de consola cuando se aplique a elementos DOM y componentes (en init y después de hacer clic en el botón).

No estoy seguro de cuál debería ser la salida esperada. Ya sea

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

¿Qué está pasando realmente?

Los mensajes de la directiva son los mismos en init, pero diferentes después de hacer clic en el botón.

Salida de consola real:

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

Parece que el orden en el que se aplican las directivas a los elementos y componentes DOM es diferente. En mi configuración tengo una directiva personalizada que se basa en algún atributo DOM con datos de configuración. Cuando esta directiva personalizada está vinculada / no vinculada en un "flujo regular", todo funciona como se esperaba (la directiva se vincula después de que se actualizan los atributos del elemento). Sin embargo, cuando la directiva está vinculada / no vinculada en el caso de la "estrategia de parche en el lugar" de Vue, el comportamiento parece ser diferente.

bug has workaround

Fuente

bponomarenko

Comentario más útil

Parece que la directiva se llama con el componente antiguo (porque se reutiliza) pero todavía tiene atributos antiguos

Como solución alternativa, establezca una clave en uno de los componentes

posva en 15 abr. 2019

👍2 🚀1

Todos 6 comentarios

Parece que la directiva se llama con el componente antiguo (porque se reutiliza) pero todavía tiene atributos antiguos

Como solución alternativa, establezca una clave en uno de los componentes

posva en 15 abr. 2019

👍2 🚀1

@bponomarenko
Lo que dijo @posva ya está cubierto en la documentación.
Puede hacer referencia a esto.

https://vuejs.org/v2/guide/conditional.html#Controlling -Elementos-reutilizables-con-clave

pistis en 15 abr. 2019

@posva @pistis Gracias por la respuesta. Sí, eso es lo que usamos eventualmente como solución, tuve que mencionar eso en el ticket. Sin embargo, la presencia del atributo key no permitirá utilizar optimizaciones de renderizado de Vue.js. Sería genial que lo arreglaran.

bponomarenko en 16 abr. 2019

La optimización se basa en que tiene elementos sin estado, por lo que Vue no se molestará en administrar correctamente los controladores de eventos o los estados locales cuando intente reutilizar un elemento. Así que creo que esto no es un error, pero se puede mejorar potencialmente en nuestros documentos para que nuestros usuarios puedan entenderlo más fácilmente.

Justineo en 16 abr. 2019

@Justineo Entiendo los conceptos detrás de una optimización en sí. En mi situación, la directiva personalizada es responsable de agregar el atributo de estado al elemento en bind y eliminar ese atributo en unbind . Y la directiva se agrega / elimina perfectamente cuando el componente es reutilizado por Vue.js. Sin embargo, el orden de actualización de las propiedades de los componentes y la inicialización de la directiva es diferente en diferentes momentos de la vida útil del componente, lo que dificulta el desarrollo de directivas personalizadas.
De hecho, la documentación adicional sobre estas técnicas de optimización puede ser útil, pero en mi opinión, los eventos del ciclo de vida de directivas inconsistentes son más bien un error que corregir.

bponomarenko en 16 abr. 2019

👍1