● v-pre

v-pre는 컴파일할 때 <template> 태그 영역을 건너뛰게 하는 디렉티브입니다. 뷰는 SFC 파일의 <template> 태그를 런타임 또는 빌드 과정에서 컴파일합니다. 컴파일은 성능에 영향을 주는 부분으로, 컴파일하는 코드양이 많을수록 초기 렌더링 성능이 저하됩니다. 그래서 컴파일을 적게 할수록 초기 렌더링 성능이 향상됩니다. SFC 파일의 <template> 태그 영역에 뷰 문법이 사용되지 않으면 컴파일할 필요가 없으므로 v-pre 디렉티브를 추가해 컴파일을 건너뛰게 합니다.

v-pre/src/App.vue

<script>
export default {
  data() {
    return {

      message: 'Hello, Vue JS',

    };
  },
}
</script>
<template>

  <div v-pre>{{ message }}</div>

</template>