Vue3 기초 : v-once

 

 

 

v-once 속성을 태그에 주면 한번 렌더링 된 후에 프로퍼티 값이 변경 되더라도 다시 렌더링이 되지 않고 처음 렌더링 될 때의 값을 유지한다.

 

<template>
  <div>
    <h1 v-once v-text="user.name"></h1>
    <h1 v-text="user.name"></h1>
    <input type="text" v-model="user.name" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      user: {
        name: "kj",
        age: 33,
        job: "programmer",
      },
    };
  },
};
</script>

<style></style>

 

위와같이 코드를 짜면 화면에 그려진 input창에는 user의 name값이 자동으로 바인딩이 되고 값을 변경하면 v-once 속성의 여부에 따라 값이 변경되거나 변경되지 않는다.