[Vue.js] 컴포넌트 Basic_ch.5

 

목차

• 컴포넌트란?
• 컴포넌트 구조 이해하기
• 데이터 바인딩
• 리스트 렌더링(v-for)
• 렌더링 문법(v-if, v-show)
• 이벤트 처리(v-on)
• computed와 watch

 

 

 

Vue 컴포넌트 개발을 위한 기본 문법에 대해 알아보자.

 

 

컴포넌트란?

컴포넌트는 View, Data, Code의 세트이다. HTML 코드가 있고, 이 HTML 코드를 실행하기 위한 자바스크립트 코드 그리고 데이터가 존재한다.

컴포넌트의 가장 큰 특징은 재사용이 가능하다는 점이다. 다른 컴포넌트에 import 해서 사용할 수 있다. Vue에서 컴포넌트는 페이지 자체일 수도 있고, 페이지 내 특정 기능 요소일 수 있다. 

 

Vue CLI 이용하여 프로젝트 최초 생성 시, src 폴더 밑에 components 폴더가 있다. 그런데 라우터 설정을 위해 vue-router를 추가하면 src 폴더 밑에 views 폴더가 생성되는 것을 확인할 수 있다. 

views 폴더에 페이지 전체를 이루는 vue 컴포넌트 파일을 생성하고, components 폴더에는 재사용을 위한 화면의 일부 기능 요소에 해당하는 vue 파일을 생성하고 관리하게 된다. 

이렇게 물리적으로 프로젝트 폴더를 구분해서 사용하는 것이 관리적인 차원에서 훨씬 효율적이다. 

 

 

컴포넌트 구조 이해하기

snippet은 특정 코드를 미리 작성하고 등록하여 단축키로 코드를 불러와서 바로 사용할 수 있는 기능이다. vue 컴포넌트의 기본 구조를 알아본 다음, 해당 코드를 snippet으로 등록해 보도록 하겠다. 

 

▷ 컴포넌트 기본 구조

<template>
	<div></div>
</template>
<script>
	export default {
    	name: '', //컴포넌트 이름
        components: {}, //다른 컴포넌트 사용 시 컴포넌트를 import하고, 배열로 저장
        data() { //html과 자바스크립트 코드에서 사용할 데이터 변수 선언
        	return {
            	sampleData: ''
            };
        },
        setup() {}, //컴포지션 API
        created() {}, //컴포넌트가 생성되면 실행
        mounted() {}, //template에 정의된 html 코드가 렌더링된 후 실행
        unmounted() {}, //unmount가 완료된 후 실행
        methods: {} //컴포넌트 내에서 사용할 메소드 정의
    }
</script>

컴포넌트 라이프사이클 훅 created, mounted, unmounted 3가지를 기본 구조로 사용하는 이유는 실무에서 컴포넌트 개발 시 가장 많이 사용하는 라이프사이클 훅이기 때문이다. 이외에도 더 많은 라이프사이클 훅이 존재한다. 

 

이 코드를 vs code에서 등록해서 불러와 사용할 수 있도록 snippet 기능을 제공한다. 

 

▷ Snippet 설정

윈도우 기준 vs code ) 파일 > 기본 설정 > 사용자 코드 조각 클릭 후 'vue' 를 입력한 다음 vue(Vue)를 선택한다. 

 Vue.json 파일이 열린다. 앞서 작성했던 컴포넌트 기본 구조를 복사해서 body에 넣어준다. 이때 주의할 점은 코드를 문자열로 등록해야 하기 때문에, \n(뉴라인), \t(탭)을 이용해 코드 포맷을 맞춰주어야 한다.

{
	"Generate Basic Vue Code": {
		"prefix": "vue-start",
		"body": [
			"<template></template>\n<script>\n\texport default {\n\t\tname: '',\n\t\tcomponents: {},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tsampleData: ''\n\t\t\t};\n\t\t},\n\t\tsetup() {},\n\t\tcreated() {},\n\t\tmounted() {},\n\t\tunmounted() {},\n\t\tmethods: {}\n\t}\n</script>"
		],
		"description": "Generate Basic Vue Code"
	}
}

 

▷ Lifecycle Hooks

Vue 컴포넌트 개발 시 각 라이프사이클 훅에 따라 프로그램을 적절히 배치하면 화면 로딩 시간을 개선할 수 있다. 예를 들어 사용자가 특정 화면에 접속 시, 화면에서 제일 먼저 보여지는 데이터 영역의 경우는 created() 에 정의해서 서버로부터 미리 받아오고, 화면 로딩 이후에 삽입되어도 되는 데이터 혹은 HTMl 객체 부분은 mounted() 훅에 정의함으로써 데이터와 HTML 부분을 로딩하는 타이밍을 적절히 분배하는 것이다. 이렇게 함으로써 사용자가 느끼는 화면 로딩 속도를 개선할 수 있다. 

 

Lifecycle Hooks 다이어그램

 

 

데이터 바인딩

Vue는 Angular와 마찬가지로 양방향 데이터 바인딩을 지원한다. React는 단방향 데이터 바인딩만을 지원한다.

양방향 데이터 바인딩이란 모델(Model)에서 데이터를 정의한 후 뷰(View)와 연결하면 모델과 뷰 중 어느 한쪽에 변경이 일어났을 때 다른 한쪽에 자동으로 반영되는 것을 의미한다. 

Vue 컴포넌트에서 데이터를 바인딩하는 방법은 바인딩 되는 유형에 따라 적용하는 방식에 조금씩 차이가 있다. 지금부터 Vue에서 사용돠는 데이터 바인딩 문법을 하나씩 알아보자. 

 

▶ 문자열 데이터 바인딩

문자열의 경우, 이중 중괄호를 이용해서 데이터를 바인딩 하면 된다. 

<h1>Hello, {{title}}!</h1>

 

▶ raw(원시) HTML 데이터 바인딩

HTML 태그를 바인딩 할 때는 이중 중괄호를 이용해서 바인딩 하면 html 태그가 아니라 문자열 텍스트로 인식하게 된다.

실제 HTML로 출력되기 위해서는 v-html 디렉티브를 사용해야 한다. 

<template>
    <div>
        <div>{{htmlString}}</div>
        <div v-html="htmlString"></div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                htmlString: '<p style="color:red;">This is a red string.</p>'
            };
        }
    }
</script>

 

▶ Form 입력 데이터 바인딩

Form Element에 속하는 객체들은 v-model 디렉티브를 사용하여 양방향 데이터 바인딩을 처리할 수 있다. 주의해야 할 점은 v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송한다는 것이다. 

 

≫ Input type=text

Input type=text에서 v-model은 내부적으로 input type=text의 value 속성을 사용하게 된다. data()에 정의된 데이터 키명을 v-model에 넣어주면 모델인 data와 뷰인 input type=text의 value 속성이 서로 양방향으로 데이터 바인딩 설정된다. 사용자가 input type=text 객체의 텍스트를 직접 입력하여 변경하면 변경된 데이터를 가져오는 별도의 코드 작성 없이 모델인 data의 valueModel에 사용자가 입력한 텍스트가 그대로 저장이 되게 된다. 

<input type="text" v-model="valueModel" />

≫ Input type=number

input type=number 객체를 사용하여 사용자의 입력 값이 문자가 아닌 숫자로 바로 처리할 수 있도록 v-model.number 디렉티브를 사용할 수 있다. 이렇게 하면 사용자 입력 값을 문자가 아닌 숫자로 관리할 수 있다. 

<input type="number" v-model.number="numberModel" />

≫ Textarea

<textarea v-model="message"></textarea>

≫ Select

Select 객체 역시 input type=text와 동일하게 v-model은 내부적으로 select의 value 속성을 사용해서 양방향 데이터 바인딩을 한다. 

<template>
    <div>
        <select v-model="city">
            <option value="02">서울</option>
            <option value="21">부산</option>
            <option value="064">제주</option>
        </select>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                city: "064"
            };
        }
    }
</script>

≫ 체크박스(input type=checkbox)

체크박스의 경우 input type=text, select와 다르게 v-model은 내부적으로 체크 박스의 checked 속성을 사용한다. v-model이 체크박스의 value 속성이 아닌 checked 속성을 사용하기 때문에 value 속성에 데이터 바인딩을 하려면 v-model이 아닌 v-bind:value를 사용해야 한다. 

<template>
    <div>
        <label><input type="checkbox" v-model="checked">{{checked}}</label>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                checked: true
            };
        }
    }
</script>

체크박스가 체크 되었을 때의 기본 값은 true이고, 해제되었을 때는 false이다.

다음 코드를 통해 체크/해제 되었을 때 기본 값을 변경할 수 있다. 

<label><input type="checkbox" v-model="checked" true-value="yes" false-value="no">{{checked}}</label>

여러 개의 체크박스를 사용할 때는 배열을 이용해 데이터를 바인딩해서 한 번에 처리할 수 있다. 

<template>
    <div>
        <label><input type="checkbox" v-model="checked" value="서울">서울</label>
        <label><input type="checkbox" v-model="checked" value="부산">부산</label>
        <label><input type="checkbox" v-model="checked" value="제주">제주</label>
        <br>
        <span>체크한 지역 : {{checked}}</span>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                checked: []
            };
        }
    }
</script>

체크박스 바인딩 적용 화면(배열)

≫ 라디오(input type=radio)

라디오도 체크박스와 마찬가지로 v-model은 내부적으로 checked 속성과 바인딩 된다. value 속성에 바인딩 하기 위해서는 v-model이 아닌 v-bind:value를 사용해야 한다.

<template>
    <div>
        <label><input type="radio" v-bind:value="radioValue1" v-model="picked">서울</label>
        <label><input type="radio" v-bind:value="radioValue2" v-model="picked">부산</label>
        <label><input type="radio" v-bind:value="radioValue3" v-model="picked">제주</label>
        <br>
        <span>선택한 지역 : {{picked}}</span>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                picked: '',
                radioValue1: '서울',
                radioValue2: '부산',
                radioValue3: '제주',
            };
        }
    }
</script>

라디오 바인딩 적용 화면

 

▶ 속성(Attribute)

value를 제외한 HTML 객체의 속성(attribute)에 데이터를 바인딩 하기 위해서 v-bind: 디렉티브를 사용한다. v-bind: 디렉티브는 v-bind를 생략하고 :(콜론)으로 사용할 수도 있다. 

 

≫ Img 객체의 src

data에 정의한 imgSrc를 img 객체의 src 속성에 바인딩했다.

<template>
    <div>
        <img v-bind:src="imgSrc" />
    </div>
</template>
<script>
    export default {
        data() {
            return {
                imgSrc: "https://kr.vuejs.org/images/logo.png"
            };
        }
    }
</script>

≫ button 객체의 disabled

버튼에서 disabled 속성이 true로 되어 있으면 버튼은 비활성화가 되고, 사용자가 클릭을 해도 이벤트가 발생하지 않는다.

필수 입력 조건이 모두 입력이 되었을 때 버튼을 활성화한다던지, 권한이 있는 사용자에게만 허용되는 버튼에 대해 활성환하는 등의 경우에 활용 가능하다. 

 

아래 예제 코드에서 데이터가 입력되는 순간, 버튼이 활성화된다. v-model=textValue가 비어 있는 경우에는 버튼이 비활성화 되어 있게 된다. 

<template>
    <div>
        <input type="text" v-model="textValue" />
        <button type="button" v-bind:disabled="textValue==''">Click</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                textValue: ""
            };
        }
    }
</script>

 

▶ 클래스 바인딩

클래스 바인딩 처리 시 특이점은 반드시 적용해야 하는 클래스는 기존 html에서 사용하는 방식처럼 class 속성에 클래스명을 입력하면 되고, 조건에 따라 바인딩할 클래스의 경우 v-bind:class를 이용하여 추가적으로 정의해서 사용할 수 있다는 것이다. 

다른 속성의 경우 하나의 속성만을 이용해서 바인딩해야 하지만 클래스의 경우 기본 클래스와 데이터 바인딩 처리를 하는 클래스를 공존해서 사용할 수 있다.

<template>
    <div class="container" v-bind:class="{
            'active': isActive, 'text-red': hasError
        }">Class Binding
    </div>
</template>
<script>
    export default {
        data() {
            return {
                isActive: true,
                hasError: false
            };
        }
    }
</script>
<style scoped>
    container {
        width: 100%;
        height: 200px;
    }
    .active {
        background-color: yellow;
        font-weight: bold;
    }
    .text-red {
        color: red;
    }
</style>

클래스 바인딩의 경우 오브젝트 형태로 사용하며, 바인딩할 클래스를 key로 잡고 바인딩 여부를 true/false로 지정한다. 예제 코드 결과는 class="container active"가 적용된다. 

 

다음과 같이 배열을 사용해서 클래스를 바인딩 할 수도 있다. 결과는 class="container active text-red"로 적용이 된다. 배열을 사용하는 경우 특정 조건에 따른 클래스 바인딩 처리를 true/false로 할 수 없다. 

<template>
    <div class="container" 
        v-bind:class="[activeClass, errorClass]">Class Binding
    </div>
</template>
<script>
    export default {
        data() {
            return {
                activeClass: 'active',
                errorClass: 'text-red'
            };
        }
    }
</script>

 

▶ 인라인 스타일 바인딩

인라인 스타일의 경우 데이터를 오브젝트로 선언해서 바인딩할 수 있다.

<template>
   <div v-bind:style="styleObject">인라인 스타일 바인딩</div>
</template>
<script>
    export default {
        data() {
            return {
                styleObject: {
                    color: 'red',
                    fontSize: '13px'
                },
            };
        }
    }
</script>

인라인 스타일 바인딩 역시 클래스 바인딩처럼, 배열을 이용해서 바인딩 할 수 있다. 

<template>
   <div v-bind:style="[baseStyle, addStyle]">인라인 스타일 바인딩</div>
</template>
<script>
    export default {
        data() {
            return {
                baseStyle: {backgroundColor:'yellow', width:'100%', height:'200px'},
                addStyle: {color:'red', fontWeight:'bold'}
            };
        }
    }
</script>

 

 

리스트 렌더링(v-for)

다중 데이터를 처리해야 할 일이 자주 발생한다. 주로 많이 사용되는 부분은 select의 option, table의 tr 데이터 등 반복되는 객체 처리할 때 이다.

배열 데이터는 v-for 디렉티브를 이용해서 바인딩할 수 있다. 사용 방법은 v-for="(item, index) in items" 형식으로 사용한다. 여기서 items는 데이터 배열이다. 

<table>
       <thead>
            <tr>
                <th>제품명</th>
                <th>가격</th>
                <th>카테고리</th>
                <th>배송료</th>
            </tr>
        </thead>
        <tbody>
            <tr :key="i" v-for="(product, i) in productList">
                <td>{{product.product_name}}</td>
                <td>{{product.price}}</td>
                <td>{{product.category}}</td>
                <td>{{product.delivery_price}}</td>
            </tr>
        </tbody>
</table>

 

 

렌더링 문법(v-if, v-show)

Vue 컴포넌트에서 조건에 따라 렌더링을 하는 방법은 v-if 디렉티브와 v-show 디렉티브를 사용하는 방법이 있다.

 

▶ v-if

v-if 디렉티브에 true가 리턴이 되면 html 블록이 렌더링 된다. 반대로 false인 경우 화면에 렌더링 되지 않는다.

<h1 v-if="bRender">bRender가 true이면, h1 블록이 화면에 보이게 됩니다.</h1>

v-else 디렉티브를 사용해서 else 표현식을 사용할 수 있다.

<h1 v-if="bRender">bRender가 true이면, 현재 블록이 화면에 보이게 됩니다.</h1>
<h1 v-else>bRender가 true가 아니면, 현재 블록이 화면에 보이게 됩니다.</h1>

아래와 같이 v-else-if 디렉티브를 사용해서 else if 표현식을 사용할 수도 있다.

<template>
   <div>
       <h1 v-if="type=='A'">A</h1>
       <h1 v-else-if="type=='B'">B</h1>
       <h1 v-else>C</h1>
   </div>
</template>
<script>
    export default {
        data() {
            return {
                type: 'A'
            };
        }
    }
</script>

 

▶ v-show

<h1 v-show="bShow">bShow가 true이면, 현재 블록이 화면에 보이게 됩니다.</h1>

 

▶ v-if 와 v-show의 차이점

v-if와 v-show는 비슷해 보이지만, 내부적으로 렌더링 되는 방식에 큰 차이가 있다. 

v-if는 조건을 만족하면 그 순간에 html 블록이 생성되고, 조건에 만족하지 않으면 html 블록은 삭제된다. 

v-show는 조건 만족 여부에 상관없이 무조건 html 블록이 생성되며, 조건을 만족하면 css의 display를 이용해서 화면에 보이게 되고, 조건을 만족하지 않으면 화면에서 숨김 처리 된다. 즉, 조건 만족 여부에 상관없이 무조건 렌더링 되는 것이다.

 

v-if는 실제로 해당 블록 전체를 생성했다가 삭제하기 때문에 해당 블록에 toggle이 일어날 때, v-show보다 더 많은 자원을 사용하게 된다. 

v-show는 조건 만족 여부에 상관없이 무조건 생성된 후 display만 보였다 안보였다 하는 것이기 때문에, 제일 처음에 조건이 만족하지 않더라도 html 블록을 무조건 생성한다는 단점이 있다. 

 

따라서 v-if와 v-show를 사용할 때는 해당 html 블록이 화면 내에서 자주 toggle이 일어나면 v-show를 사용하고, toggle이 일어나는 빈도가 작다면 v-if를 사용하는 것이 좋다. 

 

 

이벤트 처리(v-on)

Vue 컴포넌트에서 이벤트를 처리할 때는 v-on 디렉티브를 사용한다. v-on 디렉티브는 심볼 @로도 사용 가능하다. 

 

▶ 클릭 이벤트(v-on:click)

클릭 이벤트는 v-on:click="메소드명" 혹은 @click="메소드명"을 사용해서 추가할 수 있다.

<template>
   <div>
       <button type="button" @click="increaseCounter">Add 1</button>
       <p>The counter is : {{counter}}</p>
   </div>
</template>
<script>
    export default {
        data() {
            return {
                counter: 0
            };
        },
        methods: {
            increaseCounter() {
                this.counter = this.counter + 1;
            }
        }
    }
</script>

클릭 이벤트를 통해 지정된 함수로 파라미터를 전달하고 싶다면 다음과 같이 함수 호출 시 파라미터를 설정하면 된다. 

<button type="button" @click="increaseCounter(7)">Set 7</button>
<p>The counter is : {{counter}}</p>

methods: {
    increaseCounter(counter) {
        this.counter = counter;
    }
}

클릭 이벤트 발생 시 여러 개의 함수 호출하고 싶다면 다음과 같이 작성한다. 

<button type="button" @click="one(), two()">Click</button>

methods: {
    one() {
        alert('One');
    },
    two() {
        alert('Two');
    }
}

 

▶ Change 이벤트

Change 이벤트가 가장 많이 사용되는 Html 태그는 select이다. 사용자가 select에서 옵션을 바꿀 때마다 Change 이벤트가 발생한다. 

Change 이벤트는 @change="메소드명"으로 사용한다.

<template>
   <div>
       <select v-model="selectedValue" @change="changeSelect">
           <option value="서울">서울</option>
           <option value="부산">부산</option>
           <option value="제주">제주</option>
       </select>
   </div>
</template>
<script>
    export default {
        data() {
            return {
                selectedValue: ''
            };
        },
        methods: {
            changeSelect() {
                alert(this.selectedValue);
            }
        }
    }
</script>

 

▶ Key 이벤트

Key 이벤트는 사용자가 키보드 자판을 입력할 때 발생하는 이벤트이다. 

@keyup.enter 코드만으로 Vue 컴포넌트에서는 사용자의 엔터키 입력을 감지할 수 있다.

<input @keyup.enter="submit"/>

 

이외에도 Vue에서는 다음과 같이 자주 사용되는 key 이벤트를 제공한다. 

• enter
• .tab
• .delete(키보드의 Del키, Backspace키)
• .esc
• .space
• .up
• .down
• .left
• .right

 

Contrl, Shift, Alt 키와 같이 다른 키와 같이 사용되는 특수 키에 대해서는 다음과 같이 처리할 수 있다.

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

 

 

computed와 watch

computed와 watch는 둘 다 Vue 인스턴스 내의 정의된 데이터 값에 변경이 일어나는지를 감시하고, 변경될 때마다 정의된 함수가 실행된다. 데이터의 값이 변경이 되었는지를 계속 감시한다는 측면에서 computed와 watch는 매우 비슷해 보이지만, 사용되는 용도에 분명한 차이가 있다.

 

▶ computed

computed는 Vue 인스턴스 내에 정의된 데이터 값과 연관된 또 하나의 데이터를 정의해서 사용할 수 있도록 해준다. 

<template>
   <div>
       <h1>Full Name : {{fullName}}</h1>
   </div>
</template>
<script>
    export default {
        data() {
            return {
                firstName: 'Seungwon',
                lastName: 'Go'
            };
        },
        computed: {
            fullName() {
                return this.firstName + ' ' + this.lastName;
            }
        }
    }
</script>

computed에 정의된 fullName은 함수이자 동시에 Vue 인스턴스의 데이터 키 값이다. computed는 데이터 값에 변경이 일어나는지 감시한다고 했다. computed에 정의해서 사용하면 화면 내 여러 곳에서 fullName을 사용하더라도 이에 대한 연산은 한 번밖에 일어나지 않는다. 문자열 표현식인 이중괄호 안에서 2개의 데이터 값을 합하는 연산과 함수로 구현된 연산이 화면에 보이는 수만큼 호출되어 연산을 다시 하는 것과 큰 차이가 있다. 또한, 함수를 이용해서 fullName을 계산하는 경우는 firstName 혹은 lastName에 변경이 일어났을 때를 감지할 수 없다. 

 

▶ watch

watch 역시 computed처럼 Vue 인스턴스에 정의된 데이터 값이 변경이 일어나는지 감시하고, 변경이 일어나면 지정된 함수를 실행시킬 수 있다.

하지만 computed의 경우 기존에 정의된 데이터 값을 기반으로 새로운 데이터 값을 활용하기 위해 사용된다면, watch는 watch에 정의된 데이터 값 하나만을 감시하기 위한 용도로 사용된다. 

또한 watch는 computed와 다르게 실제 데이터 변경이 일어나기 전까지는 실행되지 않는다. 즉, 초기에 지정된 값인 firstName과 lastName에 값이 있음에도 불구하고 fullName은 아무런 값도 할당되지 않는다. firstName과 lastName의 초기에 할당된 값이 반드시 변경이 일어나야만 watch가 실행된다. 

 

<template>
   <div>
       <h1>Full Name : {{fullName}}</h1>
   </div>
</template>
<script>
    export default {
        data() {
            return {
                firstName: 'Seungwon',
                lastName: 'Go',
                fullName: ''
            };
        },
        watch: {
            firstName() {
                this.fullName = this.firstName + ' ' + this.lastName;
            },
            lastName() {
                this.fullName = this.firstName + ' ' + this.lastName;
            }
        }
    }
</script>

코드 실행하면 아래 화면 처럼 Full Name은 아무것도 출력되지 않는다.

watch 적용 화면1

버튼을 추가하고, 버튼을 클릭하면 firstName 값을 변경해 보겠다.

<template>
   <div>
       <h1>Full Name : {{fullName}}</h1>
       <button type="button" @click="changeName">변경</button>
   </div>
</template>
<script>
    export default {
        data() {
            return {
                firstName: 'Seungwon',
                lastName: 'Go',
                fullName: ''
            };
        },
        watch: {
            firstName() {
                this.fullName = this.firstName + ' ' + this.lastName;
            },
            lastName() {
                this.fullName = this.firstName + ' ' + this.lastName;
            }
        },
        methods: {
            changeName() {
                this.firstName = 'Eunsol';
            }
        }
    }
</script>

코드를 실행하면 처음에는 Full Name이 보이지 않지만, 버튼을 클릭하면 firstName 변경으로 인해 watch가 실행되고, firstName

함수를 통해 fullName이 갱신된다. 

watch 적용 화면2

 

이와 같이 computed는 정의된 데이터 값을 바탕으로 새로운 데이터 값을 생성하고, 새로운 데이터 값에서 참조하고 있는 기존 데이터 값의 변경을 감지한다. 그리고 참조하고 있는 데이터 값의 변경과 상관없이 최초에 computed에 정의된 데이터 함수를 실행한다. 

 

watch는 초기에 할당된 값에서 변경이 일어나야 watch에 정의한 함수를 실행한다는 차이가 있다. 

 

 

 

 

 

 

 

 

 

※ 출처 고승원, 『Vue.js 프로젝트 투입 일주일 전』, 비제이퍼블릭, p128-137.