[Vue 3] v-pre 컴파일 무시하기

Vue는 {{}}을 통해 HTML 태그의 내용물을 동적으로 바꿀 수 있습니다. 하지만 만약 {{}} 자체를 렌더링하고 싶은 경우는 어떻게 해야할까요? v-pre를 이용하면 됩니다.

v-pre

Vue가 처리해야할 요소가 없다는 걸 미리 알려줍니다.

v-pre 문법

단순히 v-pre 만 추가해주면 해당 태그안의 내용은 컴파일하지 않습니다.

      <태그 v-pre>
  {{ message }}
  <태그> <!-- 하위 태그도 마찬가지 -->
    {{ message }}  
  </태그>
</태그>
    

v-pre 이걸 대체 왜…

나름 이유를 찾아보려고 구글링 해봤지만 정확한 이유는 모르겠습니다. 공식 홈페이지에서도 일반적인 용도는 그저 머스태쉬 태그({{}})를 보일 수 있게 하기 위함이라고 하니..

컴파일을 하지 않기 때문에 Vue가 그만큼 자원을 덜 쓰게 되고 컴파일 속도를 개선할 수도 있을겁니다.

다른 언어나 라이브러리를 같이 사용할 때 {{}}를 사용하는 경우면 쓸만하지 않을까 생각합니다.