[Vue] v-if 와 v-show 의 차이. 사용 시 주의사항.

vuejs
v-if   vs   v-show

 

• v-if : element가 자체가 있고없고
• v-show : element는 있는데 visible on/off

 

역시. 예제로 보기

v-if

<div
  v-if="displayByValue"
  class="col-7 col-md-6"
>

  <input id="some_id" ... /> 
  <!-- blah blah -->

</div>
        
export default {
  computed: {
    displayByValue: function () {
      return this.$store.state.myvalue
    }
  },
  ...
  
  mounted: function () {
    // event binding
    $('#some_id').click(....);
  }
}

- state 의 myvalue값에 따라 <div>를 표시하고 숨기고 하기 위한 코드입니다.

- 정상 작동 하는것 처럼 보이지만 치명적인 오류가 있죠.

- 처음 화면이 뜨고, state.myvalue 가 true 면 v-if 가 보여지고 mounted 에서 click event 가 바인딩 됩니다.

- 그러다가 state.myvalue 값이 변경되서 v-if 가 false가 되면 element가 없어지겠죠. 물론, event도 해제.

- 또 다시 state.myvalue 가 true로 다시 변경되면 <input id="some_id"..> 가 보이게 됩니다.

- 하지만 event 는 바인딩 되지 않습니다. 왜냐하면 state.myvalue 가 변경되면서 새로 생긴 input 이기 때문이죠.

 

이 문제의 해결방법은..

- (안좋은방법) state.myvalue 의 값이 true 로 변경될때 마다 $('#some_id').click(....); 이벤트를 바인딩 한다.

- v-show 를 쓴다.

 

v-show

위 코드에서 v-if 를 v-show 로 바꿔주기만 하면 됩니다.

<div
  v-show="displayByValue"
  class="col-7 col-md-6"
>

  <input id="some_id" ... /> 
  <!-- blah blah -->

</div>
        
export default {
  computed: {
    displayByValue: function () {
      return this.$store.state.myvalue
    }
  },
  ...
  
  mounted: function () {
    // event binding
    $('#some_id').click(....);
  }
}

element 가 삭제/신규생성이 아니고 visible만 none/display 로 바뀌기 때문에 event 가 해제되지 않습니다.

 

그렇다고 무조건 v-show만 쓰는건 아닙니다.

이 특성을 잘 기억하시고 v-if 가 필요한 곳에는 v-if 를 써야합니다.