Vue: 사용자 지정 지시문 바인딩은 구성 요소와 요소에서 다릅니다.

지시문이 (재사용되기 때문에) 이전 구성 요소와 함께 호출되는 것처럼 보이지만 여전히 오래된 속성이 있습니다.

해결 방법으로 구성 요소 중 하나에 키를 설정하십시오.

안녕하세요.
@posva가 말한 내용은 이미 문서에 포함되어 있습니다.
이것을 참조 할 수 있습니다.

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

@posva @pistis 답변 주셔서 감사합니다. 예, 그것이 우리가 결국 해결 방법으로 사용한 것입니다. 티켓에서 언급해야했습니다. 그러나 key 속성이 있으면 Vue.js 렌더링 최적화를 사용할 수 없습니다. 그것을 고치면 좋을 것입니다.

최적화는 stateless 요소가 있다는 것을 기반으로하므로 Vue는 요소를 재사용하려고 할 때 이벤트 핸들러 또는 로컬 상태를 올바르게 관리하는 데 신경 쓰지 않습니다. 그래서 저는 이것이 버그가 아니라 사용자가 이것을 더 쉽게 이해할 수 있도록 문서에서 잠재적으로 개선 될 수 있다고 생각합니다.

@Justineo 저는 최적화 자체의 개념을 이해합니다. 내 상황에서 사용자 지정 지시문은 bind 요소에 state 속성을 추가하고 unbind 해당 속성을 제거하는 역할을합니다. 그리고 Vue.js에서 컴포넌트를 재사용하면 지시문이 완벽하게 추가 / 제거됩니다. 그러나 구성 요소 속성 업데이트 및 지시문 초기화의 순서는 구성 요소 수명의 다른 순간에 다르기 때문에 사용자 지정 지시문을 개발하기가 어렵습니다.
실제로 이러한 최적화 기술에 대한 추가 문서가 도움이 될 수 있지만 일관성없는 지시문 수명주기 이벤트는 제 생각에 수정해야 할 버그입니다.

해결 방법으로 구성 요소 중 하나에 키를 설정하십시오.