vue 선언 내부 살펴보기

vue의 template 문법의 경우 doc에 설명된 내용을 보고 따라해도 이해하기 쉬울 정도로 간단하다. 

심지어 ☆★한글★☆

doc url : https://kr.vuejs.org/v2/guide/syntax.html

그래서 vue 선언 시의 script 코드의 내부에 어떤 객체가 있는가아-에 대해 

간단하게 정리해보았다. 

(다른 요소들도 있지만 개발하면서 기본적으로 사용했던 요소들)

기본적으로 vue 선언 시 다음과 같은 형태로 선언하게 되는데..

<script>

    export default {

        name : 'ComponentName', // 1)

        componets: { // 2)

        },

        data: function() { // 3)

        },

        computed: { // 4)

        },

        watch: { // 5)

        },

        methods : { // 6)

        }

    }

</script>

1) name 

name은 그냥 vue 객체의 이름을 의미한다. 이 값은 필수 값이 아닌 선택적인 값

2) components 

현재의 컴포넌트에서 다른 컴포넌트를 사용하고자 할 때 

사용하고자 하는 컴포넌트를 정의하는 곳

보통 다음과 같이 선언하여 사용한다. 

<template>

<div>

<test-vue></test-vue>

</div>

</template>

<script>

import TestVue from './TestVue'

export default {

name: 'ComponentsTest',

components: {

TestVue

}

}

</script>

현 vue 안에 넣을 vue 객체를 import 하여 가져온 다음,

components에 선언하고

template 안에도 가져온 vue 객체의 태그를 선언하면 현재 vue 안에 잘 들어가 있을 것이다. 

위 작업 중 하나라도 빼먹으면 (components에 선언하고 template에 안 그린다던가..) 

가져온 vue 객체의 template이 보이지 않음!

주로 부모 컴포넌트에서 자식 컴포넌트를 선언할 때 사용했다. 

3) data

vue 객체 내부적으로 사용하는 변수를 선언하는 부분.

data object 타입이 아닌 function 타입으로 선언한 이유는..

여러 컴포넌트에서 컴포넌트 A를 호출 한 경우,

A 컴포넌트의 변수 값이 호출한 컴포넌트들에 의해 변경되는 상황을 예방하기 위한 것

(당시 doc 문서에서 function 으로 선언하는 것을 추천했던 것으로 기억..)

선언된 변수를 화면에 그리는 방법은 다음과 같다. 

<template>

<div>

<p>{{ myName }}</p>

</div>

</template>

<script>

export default {

name: 'Test',

data: function() {

return {

myName : 'jay'

}

}

}

</script>

그냥 저렇게 선언해서 돌리면 data에서 선언했던 값 myName이 화면에 노출된다. 

4) computed 

data에서 내부 변수를 선언하는데, computed는 무엇일까?

template 에서 data의 변수를 그냥 노출하는게 아니라, 연산하는 경우... 

template 코드가 복잡해진다. 

이를 방지하고자 하는 것이 computed 

예시 코드는 다음과 같다. 

<template>

<div>

<p>{{ myName }}</p> // jay

<p>{{ reverseName }}</p> // yaj

</div>

</template>

<script>

export default {

name: 'Test',

computed: {

reverseName() {

return this.myName.split("").reverse().join('');

}

},

data: function() {

return {

myName : 'jay'

}

}

}

</script>

template 문법 doc을 보면 알 수 있겠지만, template에서 변수에 대한 연산 문구를 적어도 무방하다.

* 혹시 template 내부에서 연산하면 코드가 어떻게 될까 궁금할까봐..

<template>

<div>

<p>{{ myName }}</p> // jay

<p>{{ myName.split('').reverse().join()}}</p> // yaj

</div>

</template>

<script>

export default {

name: 'Test',

data: function() {

return {

myName : 'jay'

}

}

}

</script>

5) watch

watch는 vue 내부의 요소가 변경되었음을 감지해준다. 

또한 뷰 안에서의 라우터가 변경음을 감지해준다.

<template>

<div>

<p>{{myName}}</p>

<input v-model="age">

</div>

</template>

<script>

export default {

name: 'Test',

watch: {

age(newAge, oldAge) {

console.log(newAge, oldAge);

},

$route() {

// router가 변경된 경우 감지할 수 있다. 

}

},

data: function() {

return {

age: 0,

myName : 'jay'

}

}

}

</script>

위의 코드를 돌려보면 input에 입력되는 값에 따라 

watch를 걸어둔 age 변수 값이 변경되는 것을 확인할 수 있다. 

(v-model 관련해서는 template 문법에서 확인해볼 수 있다.)

6) methods

vue 내부 메소드를 선언하는 부분이다. 

그냥 methods 안에 넣고 싶은 메소드를 마음껏 넣으면 된다.

<script>

export default {

name: 'Test',

methods: {

testMethod() {

console.log('test test');

}

}

}

</script>

이것으로 간단하게 vue 선언 시 사용하게 되는 내부 요소에 대해 살펴보기 끝!