위의 코드에서 sayHello함수는 data에 선언된 title 값을 “안녕 VueJS!”에서 “안녕하십니까!”로 변경한 뒤 title을 출력하도록 되어 있습니다.
우리는 첫 시간을 통해 Vue는 Vue instance 내의 데이터와 DOM이 연결되어 모든 것이 반응형으로 작동하게 해준다고 배웠습니다. 따라서 처음 title 값은 “안녕 VueJS”라고 출력되지만 sayHello 함수가 호출되는 순간 data에 선언되어 있던 title값이 “안녕하십니까"로 변경되기 때문에 h1태그나 p태그 모두 “안녕하십니까”가 출력됩니다.
하지만, 위의 {{ title }}은 변경이 되기 전 값이 출력되고, {{ sayHello() }}는 변경이 된 이후의 값이 출력되었으면 좋겠다면 어떻게 해야할까요? 이럴때 사용하는 것이 바로 v-once디렉티브 입니다.
[HTML]h1 태그에 v-once디렉티브를 넣어<h1 v-once>{{ title }}</h1> 로 변경해보았습니다.
[JavaScript]
v-once 디렉티브를 삽입하자 {{ title }} 은 변경되기 전의 “안녕 VueJS!가 출력되는 것을 보실 수 있습니다. 이와 같이 v-once 디렉티브는 HTML코드로 출력이 된 이후에 어떤 후처리가 있더라도 처음에 출력한 값을 유지시킬 때 사용됩니다.
이번엔 비교적 간단해보이는 v-once 디렉티브에 대해 알아보았습니다. 다음엔 html 코드를 직접 넣어줄 수 있는 v-html 디렉티브에 대해 알아보도록 하겠습니다.
