이 글의 내용은 Vue의 핵심 연결 유지에 대한 코드 샘플 분석입니다. 특정 참고 가치가 있으므로 도움이 필요한 친구에게 도움이 되길 바랍니다.
<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="./vue.js"></script> </head> <body> <p id="app"> <keep-alive> <child-component key="1" v-if="seen" name="1"></child-component> <child-component key="2" v-if="!seen" name="2"></child-component> </keep-alive> <button @click="toggle">toggle</button> </p> <script type="text/javascript"> Vue.component('child-component', { template: `<input type="text" placeholder="enter">`, data() { return {} }, props: ["name"], mounted() { console.log(`${this.name} mounted`) } }) const vm = new Vue({ el: "#app", data: { seen: true }, methods: { toggle() { this.seen = !this.seen; } } }) </script> </body> </html>
key는 더 이상 재사용되지 않는 식별 요소입니다. 키는 Vue에서 예약된 속성이며 소품으로 하위 구성 요소에 전달할 수 없습니다. 그렇지 않으면 콘솔에 Vue 오류가 표시됩니다.
그러나 keep-alive 플래그는 구성 요소 인스턴스를 반복적으로 생성하지 않습니다. 즉, created mounted
이벤트를 한 번만 트리거합니다.
두 가지를 모두 사용하면 보다 세련된 방식으로 구성 요소 재사용을 관리할 수 있습니다
위 내용은 Vue의 주요 연결 유지에 대한 코드 예제 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!