[Udemy Vue 완벽가이드 Section2] 26. v-once로 콘텐츠 잠그기

거의 사용할 일은 없다. 하지만 필요한 순간에 유용하게 쓸 수 있다. → '초기값'을 고정해야 하는 상황!

 

이 앱에서 데이터 프로퍼티인 counter를 변경할 때 출력을 바꾸고 싶지 않을 수 있다. 즉, counter의 초기값을 유지하고 싶은 경우.

Starting Counter라는 값을 출력하고, Vue 인스턴스에서 관리하는 counter 데이터 값을 가리킨다. 하지만 counter를 변경하고 싶지 않다.

 

일부 데이터는 변경하고, 초기 상태는 유지하면서 상태를 바꾸지 않고 사용할 수 있는 특별한 디렉티브 → v-once

Vue에 내장된 기능. 보간법을 한번만 평가하도록 한다. 그 이후 그 값이 바뀌어도 반영하지 않고 업데이트되지 않는다.

 

index.html

<button v-on:click="add(10)">Add</button>
<button v-on:click="reduce(5)">Reduce</button>

<p v-once>Starting Counter: {{ counter }}</p><!--counter초기값 고정-->
<p>Result: {{ counter }}</p>

 

app.js

const app = Vue.createApp({
 data(){
  return {
   counter: 0,
  }
 },
 methods: {
  add(num){
   this.counter = this.counter + num;
  },
  reduce(num){
   this.counter = this.counter - num;
  },
 }
});

Starting Counter: 뒤에는 counter의 초기값인 0이 나오고, Result: 뒤에는 Add를 누를 때마다 계속 값이 변경된다.

 

이렇게 초기값 고정 기능은 쓸 일은 크게 많지 않지만, 고정해야 하는 상황에 알고 있다면 유용하다 :)

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.