[vue] Computed, Watch 공통점과 차이점 간단 정리

공통점

Reactive Data 변경 시점에 처리를 담당

차이점

Program State 변경 Logic 존재 여부

• 존재 : Watch 사용
• 미 존재 : Computed 사용

Computed는 Program state를 바꾸지 않는 Pure Function이다.

예시

computed

data() {
	return {
		name: "half"
	}
}

computed:{
	welcome() {
		return "hi" + this.name
	}
}

watch

data() {
	return {
		isLoading: false,
		data1: 1,
		data2: 2,
	}
}

methods: {
	// someProcess1, someProcess2 : change Program State
	someProcess1() {
		...
		this.data1 = 10
		...
	}
	someProcess2() {
		...
		this.data2 = 20
		...
	}
}

watch: {
	isLoading(newVal) {
		if(newVal == true) someProcess1()
		else someProcess2()
	}
}