2.6.10
https://jsfiddle.net/bponomarenko/uom10qd2/
A diretiva emitirá as mesmas mensagens de console quando aplicada aos elementos DOM e aos componentes (no init e após clicar no botão).
Não tenho certeza do que deve ser a saída esperada. Ou
bind: first comp
bind: first elem
unbind: first comp
unbind: first elem
bind: first comp
bind: first elem
ou
bind: first comp
bind: first elem
unbind: second comp
unbind: second elem
bind: first comp
bind: first elem
As mensagens da diretiva são as mesmas no init, mas diferentes depois que o botão é clicado.
Saída real do console:
bind: first comp
bind: first elem
unbind: first comp
unbind: second elem
bind: second comp
bind: first elem
Parece que a ordem em que as diretivas são aplicadas aos elementos e componentes DOM são diferentes. Em minha configuração, tenho uma diretiva personalizada que se baseia em algum atributo DOM com dados de configuração. Quando esta diretiva personalizada é ligada / desligada em um "fluxo regular" - tudo funciona conforme o esperado (a diretiva é ligada depois que os atributos do elemento são atualizados). No entanto, quando a diretiva é ligada / desligada no caso de "estratégia de patch in-loco" do Vue, o comportamento parece ser diferente.
Parece que a diretiva é chamada com o componente antigo (porque é reutilizado), mas ainda tem atributos antigos
Como alternativa, defina uma chave em um dos componentes
@bponomarenko
O que @posva disse já está coberto na documentação.
Você pode se referir a isso.
https://vuejs.org/v2/guide/conditional.html#Controlling -Reusable-Elements-with-key
@posva @pistis Obrigado pela resposta. Sim, isso é o que usamos eventualmente como uma solução alternativa, eu tive que mencionar isso no tíquete. No entanto, a presença do atributo key
não permitirá o uso de otimizações de renderização Vue.js. Seria ótimo consertá-lo.
A otimização é baseada no fato de você ter elementos sem estado, então o Vue não se preocupará em gerenciar corretamente os manipuladores de eventos ou estados locais ao tentar reutilizar um elemento. Portanto, acho que isso não é um bug, mas pode ser potencialmente melhorado em nossos documentos para que nossos usuários possam entender isso mais facilmente.
@Justineo Eu entendo os conceitos por trás de uma otimização em si. Na minha situação, a diretiva personalizada é responsável por adicionar o atributo de estado ao elemento em bind
e remover esse atributo em unbind
. E a diretiva é perfeitamente adicionada / removida quando o componente é reutilizado pelo Vue.js. No entanto, a ordem da atualização das propriedades do componente e da inicialização da diretiva é diferente em diferentes momentos da vida útil do componente, o que torna difícil desenvolver diretivas personalizadas.
Na verdade, a documentação adicional sobre essas técnicas de otimização pode ser útil, mas os eventos de ciclo de vida das diretivas inconsistentes são, na minha opinião, um bug a ser corrigido.
Como alternativa, defina uma chave em um dos componentes
Comentários muito úteis
Parece que a diretiva é chamada com o componente antigo (porque é reutilizado), mas ainda tem atributos antigos
Como alternativa, defina uma chave em um dos componentes