Vue2 Options API : data, methods, computed, watch

Vue가 뭔지, 그리고 Vue의 기본 문법이 궁금하시다면? 

2025.11.18 - [Web/Vue] - Vue.js 입문 : 기본 철학과 기본 문법 정리

Vue.js 입문 : 기본 철학과 기본 문법 정리

 

---

 

1. 옵션 API (Options API)

Vue2에서는 컴포넌트를 만들 때 옵션 API 방식으로 코드를 작성합니다.

즉, 하나의 컴포넌트 안에 아래의 옵션들을 선언형으로 쭉 적어 넣는 스타일이에요.

• data
• methods
• computed
• watch

이 네 가지가 Vue 2의 기본기이자,

나중에 Vue 3에서 Composition API로 바꿔 쓸 때도 1:1로 매핑해서 생각하게 되는 핵심 개념입니다.

이제 data, methods, computed, watch의 역할과 차이에 대해서 정리해보겠습니다.

 

---

 

2. data와 methods: 상태와 행동

data와 methods는 각각 화면에 뿌릴 상태와 행동입니다.

 

---

 

1️⃣ data: 상태(state)

Vue 인스턴스 혹은 컴포넌트를 만들 때 data 옵션 안에 정의하는 값들은 Vue의 반응성 시스템에 의해 관리됩니다.

즉, data 안의 값을 변경하면, 그 값을 쓰고 있는 템플릿이 자동으로 다시 렌더링됩니다.

new Vue({
	el: '#app',
    data() {
    	return (
        	count: 0,
            username: '홍길동'
        )
    }
})

여기서 count, username은 모두 reactive 데이터입니다.

템플릿에서 {{ count }}, {{ username }}으로 쓰면 값이 바뀔 때마다 화면도 함께 갱신됩니다.

 

---

 

2️⃣ methods: 행동

methods는 말 그대로 함수(메서드)를 모아두는 곳입니다.

버튼 클릭, 폼 제출, 데이터 가공 로직 등 행동을 담당합니다.

new Vue({
	el: '#app',
    data() {
    	return {
        	count: 0
        }
    },
    methods: {
    	increment() {
        	this.count++
        },
        reset() {
        	this.count = 0
        }
    }
})

템플릿에서는 아래와 같이 메서드를 연결합니다.

<p>Count : {{ count }}</p>
<button @click="increment">+1</button>
<button @click="reset">Reset</button>

• @click="increment" : 버튼을 클릭하면 methods.increment() 실행
• this.count++ : data.count가 바뀌고, 화면도 함께 갱신

 

---

 

3. computed vs watch

Vue를 배우면 많이들 헷갈려하는 부분이 바로 이 두 가지입니다.

• computed: 어떤 값을 계산해서 반환하는 용도
• watch: 특정 데이터가 변할 때마다 부수적인 효과를 실행하는 용도

 

---

 

1️⃣ computed : 캐싱되는 계산된 값

computed는 다른 reactive 데이터에 의존해서 계산된 값을 반환합니다.

중요한 특징은 캐싱된다는 점입니다.

의존하는 값이 변하기 전까지는 다시 계산하지 않고 기존 값을 재사용합니다.

new Vue({
	el: '#app',
    data() {
    	return {
        	firstName: '길동',
            lastName: '홍'
        }
    },
    computed: {
    	fullName() {
        	// firstName 또는 lastName이 바뀔 때만 다시 계산
        	return this.lastName + ' ' + this.firstName
        }
    }
})

<p>이름: {{ fullName }}</p>

여기서 fullName은 단순히 data를 기반으로 계산된 값일 뿐이고,

다른 상태를 변경하거나, API 요청을 날리거나, DOM을 건드리면 안 됩니다.

(이건 methods나 watch의 역할)

 

---

 

2️⃣ watch : 값이 바뀔 때마다 반응하는 감시자

watch는 말 그대로 특정 데이터를 감시(watch)하면서

그 값이 바뀌면 콜백을 실행하는 용도입니다.

new Vue({
	el: '#app',
        data() {
            return {
                searchKeyword: '',
                result: null
            }
        },
        watch: {
            searchKeyword(newVal, oldVal) {
                console.log('검색어 변경:', oldVal, '->', newVal)
                this.fetchData(newVal)
            }
        },
        methods: {
            fetchData(keyword)
            // 여기에서 axios로 API 호출
        }
})

여기서 watch는

• searchKeyword가 바뀔 때마다 API 호출
• 이전 값(oldVal), 새 값(newVal)을 인자로 받을 수 있음

같은 패턴에 잘 어울립니다.

 

---

 

3️⃣ 언제 compute / watch / methods를 써야 할까?

computed는

• 다른 상태를 기반으로 계산된 값
• 캐싱됨
• 부수 효과(사이드 이펙트) 금지

 

watch는

• 값이 바뀔 때마다 뭔가 해야 할 때
• API 요청, 타이머, 로깅, 추가 계산 등

 

methods는

• 이벤트 핸들러, 버튼 클릭, 폼 제출, 즉시 실행 액션 등

이라는 기준으로 나눠서 생각하면 헷갈리지 않습니다.

 

---

 

4. 예제

아래 예제는 Vue 기본 문법과 오늘 작성한 글 내용을 한 번에 섞은 미니 계산기입니다.

<div id="app">
	<h2>간단계산기</h2>
    
    <input v-model.number="a" type="number" /> + 
    <input v-model.number="b" type="number" />
    
    <button @click="swap">a와 b 바꾸기</button>
    
    <p>결과 (computed) : {{ sum }}</p>
    
    <p v-if="sum > 10">10보다 큰 값입니다.</p>
    <p v-else>10보다 이하의 값입니다.</p>
    
    <h3>히스토리</h3>
    <ul>
    	<li v-for="(item, index) in history" :key="index">
        	{{ item }}
        </li>
    </ul>
</div>

<script scr="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
	new Vue({
    	el: '#app',
        data() {
        	return {
            	a: 0,
                b: 0,
                history: []
            }
        },
        computed: {
        	sum() {
            	return this.a + this.b
            }
        },
        watch: {
        	sum(newVal, oldVal) {
            	this.history.push(`${oldVal} -> ${newVal}`)
            }
        },
        methods: {
        	swap() {
            	const temp = this.a
                this.a = this.b
                this.b = temp
            }
        }
    })
</script>

여기서 등장한 것들을 정리하자면 아래와 같습니다.

• data: a, b, history
• computed.sum: 계산된 결과
• watch.sum: sum이 바뀔 때마다 히스토리 누적
• methods.swap: 버튼 클릭 시 a, b 값 교환
• v-if 와 v-else, v-for, v-model, @click

 

---

 

정리 및 요약

• data: 화면과 연결되는 상태(state)
• methods: 이벤트 핸들러, 행동 로직
• computed: 다른 상태 기반의 계산된 값. 캐싱됨. 부수적인 효과 없음
• watch: 특정 값이 바뀔 때마다 동작해야 하는 로직 (API 호출 등)
• v-if / v-show: 조건부 렌더링 (자주 바뀌면 v-show, 아니면 v-if)
• v-for: 리스트 렌더링, 반드시 :key 습관적으로 붙이기
• v-model: 양방향 바인딩, 폼 처리의 핵심

 

---

 

출처

• Vue 2 공식 가이드 - Vue 인스턴스

• Vue 2 공식 가이드 - Data 속성과 Methods

• Vue 2 공식 가이드 - computed와 watch

• Vue 2 공식 가이드 - 조건부 렌더링

• Vue 2 공식 가이드 - 리스트 렌더링

• [vue] methods / computed / watch

 

---

 

Vue에서의 데이터 흐름이 궁금하다면?

2025.11.19 - [Web/Vue] - Vue.js SFC, props, emit으로 부모-자식 데이터 흐름 잡기

Vue.js SFC, props, emit으로 부모-자식 데이터 흐름 잡기