데이터 양방향 바인딩 (vue.js)

v-model, computed, watch

 

[v-model]

- 입력창 이벤트 예시

<template>
    <input type="text" @keyup="textModifer" />
    {{ word }}
</template>

<script>
export default {
    name: "App",
    data() {
        return {
            word: "",
        };
    },
    methods: {
        textModifer(e) {
            this.word = e.target.value;
        },
    },
};
</script>

v-on의 단축키 중 @keyup 사용

textmodifer에서 e를 파라미터로 전달해주고 word에는 해당 입력의 value값을 지정

 

<template>
    <input type="text" v-model="word" />
    <P>입력되는 값: {{ word }}</p>
</template>

<script>
export default {
    name: "App",
    data() {
        return {
            word: "",
        };
    }
};
</script>

v-model 양방향 바인딩 (Data Two Way Binding)

v-model="내가 원하는 Data값"

input value를 write값으로 바인딩 한다.

textModfier 메소드를 이용해서 write값을 변경해주어 하나의 키워드로 해결할 수 있다. 

 

 

<template>
    <input type="text" :value="write" @input="write = $event.target.value" />
    <p>{{ write }}</p>
</template>

<script>
export default {
    name: "App",
    data() {
        return {
            write: "ttt",
        };
    },
};
</script>

@input 실시간 입력 값 데이터 공유

즉각적으로 표현되지 못하는 한글

영어와 달리 한국어는 조합이 필요하기에 input입력값에 즉각적이 표현이 안된다.

이럴때는 v-model이 아닌 기존에 value를 data값에 바인딩 해야한다. 

 

---

 

[computed]

 

computed와 methods 속성의 차이점은 무엇일까?

- methods: 렌더링이 일어날 때마다 항상 함수를 실행한다. 
- computed: 계산해야하는 목표 데이터를 정의하는 '선언형'프로그래밍 방식이다. 저장된 결과를 반환하므로 종속 대상의 변경이 일어나기 전까지는 호출되지 않는다. 

 

computed는 계산된의 의미이다.

가장 큰 특징은 종속된 값(data속성에 정의한 반응형 데이터를 말함)에 의존한다.

의 경우는 DOM이 생성되기 전에 computed객체 내부에 있는 값들을 계산하여 캐싱 => 내부 data 값이 변경되면 다시 계산한다. 미리 계산 => 캐싱 => 추적하므로 속도측면에서 유리하다. 

 

 

[methods]

일반적으로 함수를 정의할때 사용하고 computed와 호출되는 조건이 다르다. 

computed는 종속된 값에 의존하는 반면 methods는 렌더링이 일어날 때마다 호출된다.

 

- 그렇다면 언제 사용하는 것일까?
   만일 method에 여러개의 함수가 여러개라 생각해보자.
   data 변경으로 화면이 렌더링이 되는 상태일 때 해당 template안에서는 
   계속해서 methods안에 있는 여러개의 함수가 작동이 될 것이다. 
   만일 api호출같은 무거운 로직이 있을 경우등을 생각하면 성능 저하의 원인이 될 것이다. 
   종속된 값이 변화하는 시점을 잘 파악해서 computed를 이용해보면 어떨까!

 

---

[Watch]

 

computed는 '선언형 프로그래밍 방식'

watch는 '표현형 프로그래밍 방식'

 

선언형 프로그래밍: 목표하는 데이터를 지정해 놓고  그것을 이루는 데이터(변수)가 바뀌면 자동으로 추적해준다. 

표현형 프로그래밍: 추척할 데이터(변수) 를 하나씩 지정해준다. (코드가 길어질 수 있음)

 

watch는 지정한 변수값의 변화를 감시하여 부가적인 작업을 할 수 있도록 해준다. 

값이 변경되기 이전 값을 참조할 수 있다는 장점을 갖고 있다. 

 

컴포넌트 생성 후 변수가 할당되기 전에 기본적으로 모든 변수는 null값을 취하고 있다. 

이 후에 변수의 초기값이 지정되는 과정을 watch는 데이터의 변경이라 판단하지 않는다. 

ex) 같은 컴포넌트를 다시 불러올 때 props의 처음 값이 매우 중요하는 상황등