input창에 텍스트를 입력하면 '개발자'라는 문자열이 추가되어 화면에 렌더링되도록 코딩을 해놓은 상태이다.
그런데 해당 로직과 관련없는 버튼을 클릭했을때도 메서드가 실행이 되고 있다. 왜일까?
코드는 아래와 같다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>Vue Events</h1>
</header>
<section id="events">
<h2>Events in Action</h2>
<button v-on:click="add(10)">Add 10</button>
<button v-on:click="reduce(5)">Subtract 5</button>
<p>Result: {{ counter }}</p>
<input type="text" v-model="name">
<button v-on:click="resetInput">RESET</button>
<p>Your Name: {{ outputFullname() }}</p>
</section>
</body>
</html>
JavaScript
const app = Vue.createApp({
data() {
return {
counter: 0,
name: ''
};
},
methods: {
outputFullname() {
console.log('Add만 눌렀는데 Your Name 관련 메서드가 실행되네요? 잉?')
if (this.name === '') {
return ''
}
return this.name + ' ' + '개발자'
},
add(num) {
this.counter = this.counter + num;
},
reduce(num) {
this.counter = this.counter - num;
},
resetInput() {
this.name = '';
}
}
});
app.mount('#events');
HTML에 outputFullname() 메서드가 되도록 바인딩 되어 있다.
이 경우, 메서드가 어떤 역할을 하는지 모르기 때문에 vue 내부 동작에서는 리렌더링이 이루어질때마다 이벤트 핸들러를 제외한 (별도의 트리거에 바인딩이 없는) 메서드들을 그냥 재실행 시켜버린다.
이러한 이유로, 재실행할 이유가 없는 메서드들이 재실행되고, 메서드들이 많으면 성능이슈가 생길 수 있다.
이것을 막을 수 있는 기술적인 방법은
computed 프로퍼티와 watch 함수가 있다.
'했던것들 > Vue.JS' 카테고리의 다른 글
| watchers (0) | 2023.02.09 |
|---|---|
| computed properties (0) | 2023.02.09 |
| v-once, v-model(양방향 바인딩) (0) | 2023.02.09 |
| 실습) vue 이벤트 바인딩 (0) | 2023.02.08 |
| 실습) vue 데이터 바인딩 응용 (0) | 2023.02.07 |
