VueJS 조건부 렌더링 "v-if"의 놀라운 결과

Daniel McCullough에 Unsplash님의 사진

오늘은 간단한 VueJS 구성 요소를 만들려고 시도하는 동안 모든 것이 잘못되는 것처럼 보였던 날 중 하나였습니다. 당신이 모든 것에 대해 질문하는 날 — 나는 개발자입니까? 내가 뭘 잘못하고 있죠?? 이것이 어떻게 작동하지 않을 수 있습니까 ??? Google에서 귀하의 정확한 문제를 찾지 못하는 것 같아서 깊은 절망이 시작됩니다. 우리는 모두 여기에 왔습니다. 스택 오버플로가 당신을 버리고 스스로 문제에 대한 답을 찾아야 합니다. 내 문제가 앞으로 한두 시간을 절약할 수 있기를 바랍니다.

먼저 v-if와 v-show의 차이점에 대한 간략한 요약입니다. v-if는 지시문이 true로 설정되지 않은 경우 페이지에 DOM 요소를 로드하지 않으려는 경우에 사용됩니다. 지시문을 전환하면 DOM 요소가 DOM에서 제거된 다음 다시 삽입되어 연결된 모든 항목이 실행됩니다VueJs life cycle events..

v-show는 DOM 내에서 구성 요소를 숨기고 표시하는 데 사용됩니다. 주요 차이점은 요소가 디스플레이에서 제거되는 방법에 있습니다. DOM 요소를 완전히 제거하는 대신; CSS 속성이 추가됩니다. display:none. VueJS 수명 주기 이벤트는 v-show를 사용하는 동안 실행되지 않는다는 점에 유의하는 것이 중요합니다.

v-show는 항상 요소를 DOM에 로드하므로 초기 렌더링은 더 높지만 디스플레이 토글은 더 빠릅니다. 자세한 내용은 documentation.을 참조하십시오.

내 상황은 다음과 매우 유사한 매우 간단한 VueJs 구성 요소로 시작되었습니다. JsFiddle ( https://jsfiddle.net/simplycorey/7s20ra1e/11/ ) 구성 요소를 여러 번 마운트해야 하는 경우에도 "마운트됨"경고는 한 번만 발생합니다.

<div id="cache-demo">
  <cache-demo :component="component" v-if="component === 'first'"></cache-demo>
  <cache-demo :component="component" v-if="component === 'second'"></cache-demo>
<button @click="component = 'first'">
    First
  </button>
  <button @click="component = 'second'">
    Second
  </button>
</div>

이전에 수천 번 했던 것처럼 마운트된 함수에서 데이터를 검색하려고 시도했습니다. 내 구성 요소가 마운트되고 데이터를 검색하고 제대로 표시될 때 페이지가 로드될 때 모든 것이 정상적으로 보였습니다. 문제? 어쩐지 둘 사이에 데이터가 새고 있었다. 그들 사이에 데이터를 공유할 논리가 없었기 때문에 처음에는 마음이 아팠습니다. 소품을 확인하여 올바른 정보를 수신하고 있는지 확인했습니다. 계속된 디버깅은 탑재, 생성, 파괴 및 기타 수명 주기 이벤트가 실행되지 않는 것으로 나타났습니다.

그래서 무엇을 제공합니까? DOM의 렌더링 속도를 높이기 위해 내부 캐시 시스템을 사용하여 스마트해지려고 시도하는 VueJS로 귀결됩니다. VueJS는 구성 요소를 자동으로 재사용하고 구성 요소 간에 데이터를 공유합니다. 무슨 일이 일어나고 있는지 모르는 경우 이것은 놀랍고 실망스러운 결과를 초래할 수 있습니다.

키 속성을 추가하면 VueJS에 구성 요소가 실제로 다르며 이 내부 캐시 시스템을 사용하지 않아야 한다고 경고합니다. 대신 구성 요소는 모든 VueJS 수명 주기 이벤트를 실행할 때마다 완전히 로드됩니다.

Controlling Reusable Elements with key

Vue tries to render elements as efficiently as possible, often re-using them instead of rendering from scratch. Beyond helping make Vue very fast, this can have some useful advantages. Read more.

예제를 다음과 같이 업데이트하면 내가 찾던 결과를 얻을 수 있습니다. 첫 번째 또는 두 번째를 클릭하면 항상 마운트된 이벤트가 실행됩니다. JsFiddle ( https://jsfiddle.net/simplycorey/3uvde2p7/3/ ) 로드된 구성 요소를 전환할 때 "mounted"가 항상 실행된다는 점에 유의하십시오.

<div id="cache-demo">
  <cache-demo key="first" :component="component" v-if="component === 'first'"></cache-demo>
  <cache-demo key="second" :component="component" v-if="component === 'second'"></cache-demo>
<button @click="component = 'first'">
    First
  </button>
  <button @click="component = 'second'">
    Second
  </button>
</div>

이 기사를 읽고 무언가를 배웠다면 keep.sh을 확인하십시오. keep.sh는 free server file transfer system that allows you to send a file with a single command. MacBook 터미널이나 지금 curl을 지원하는 명령줄에서 시도해 보십시오.

curl --upload-file ./yourLocalFile.txt https://keep.sh

https://keep.sh/3d1fd43a21/yourLocalFile.txt

이 예제와 설명이 앞으로 몇 시간을 절약할 수 있기를 바랍니다!