hyungju-lee

14. computed properties

내용

계산된 속성(Computed Properties)은 Vue에서 복잡한 계산 과정을 거쳐 얻어진 속성을 의미합니다. 예를 들어, fullName 메소드는 데이터 객체의 첫 번째, 중간, 마지막 이름을 결합하여 전체 이름을 계산합니다.

메소드를 사용하는 것보다 계산된 속성을 사용하는 것이 더 효율적이며, 성능상 이점이 있습니다. Vue는 계산된 속성의 값을 캐시하고, 관련 데이터가 변경될 때만 함수를 재실행합니다.

계산된 속성은 템플릿에서 데이터처럼 사용되며, 괄호 없이 사용됩니다.

계산된 속성은 메소드와 데이터의 조합으로, 값을 반환하는 함수로 사용됩니다. 메소드는 유연하지만, 계산된 속성은 계산과 값을 반환하는 데에 집중합니다.

계산된 속성에 인수를 전달할 수 없으며, 데이터를 전달해야 하는 경우에는 메소드를 사용해야 합니다.

계산된 속성을 사용하면 애플리케이션의 성능을 크게 향상시킬 수 있습니다.

  • 계산된 속성(Computed Properties): Vue에서 계산을 통해 생성된 속성.
    • 예시: fullName 메소드는 여러 이름 데이터를 결합하여 전체 이름을 계산.
  • 효율성과 성능: 메소드보다 계산된 속성 사용이 더 효율적이며, 성능상 이점 제공.
  • 캐싱과 재실행: Vue는 계산된 속성의 값을 캐시하고, 필요할 때만 재계산.
  • 템플릿 사용: 괄호 없이 데이터처럼 템플릿에서 사용됨.
  • 속성과 메소드의 조합: 값 반환에 초점을 맞춘 함수로 사용됨.
  • 인수 전달 불가: 계산된 속성에는 인수를 전달할 수 없음. 필요한 경우 메소드 사용.
  • 성능 향상: 계산된 속성 사용으로 애플리케이션 성능 개선 가능.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
<div id="app" v-cloak>
  <p>{{  fullName() }}</p>
  <p><a :href="url" target="_blank">Google</a></p>
  <p>{{ raw_url }}</p>
  <p v-html="raw_url"></p>
  <p>{{ age }}</p>
  <hr />

  <label>First Name</label>
  <input type="text" v-model.lazy.trim="firstName">

  <br />
  <br />

  <label>Middle Name</label>
  <input type="text" @keyup.enter="updateMiddleName">

  <br />
  <br />

  <label>Last Name</label>
  <input type="text" :value="lastName" @input.prevent="updateLastName('Last name event triggered!', $event)">

  <br />
  <br />

  <label>Age</label>
  <input type="number" v-model.number="age">

  <br />
  <br />

  <button type="button" @click="increment">Increment</button>
  <button type="button" @click="age--">Decrement</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.6/vue.global.prod.min.js"></script>
<script src="app.js"></script>
</body>
</html>

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
<div id="app" v-cloak>
  <p>{{  fullName }}</p>
  <p><a :href="url" target="_blank">Google</a></p>
  <p>{{ raw_url }}</p>
  <p v-html="raw_url"></p>
  <p>{{ age }}</p>
  <hr />

  <label>First Name</label>
  <input type="text" v-model.lazy.trim="firstName">

  <br />
  <br />

  <label>Middle Name</label>
  <input type="text" @keyup.enter="updateMiddleName">

  <br />
  <br />

  <label>Last Name</label>
  <input type="text" :value="lastName" @input.prevent="updateLastName('Last name event triggered!', $event)">

  <br />
  <br />

  <label>Age</label>
  <input type="number" v-model.number="age">

  <br />
  <br />

  <button type="button" @click="increment">Increment</button>
  <button type="button" @click="age--">Decrement</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.6/vue.global.prod.min.js"></script>
<script src="app.js"></script>
</body>
</html>