[Vue.js] 새로운 v-model 살펴보기#1 (vue3에서 바뀐 점)

Vue3가 나오면서 변한 것들이 있는데 그중에서 v-model을 한번 살펴보자.
이번 포스팅에서는 간단하가 vue2에서 v-model과 vue3에서 v-model에 차이점과 기본 형식에 대해 살펴보겠다.
다음 포스티은 v-model를 여러개 쓸 때랑 modifiers에 대해 글을 써보겠다.

새로운 v-model(The new v-model)

• v-model을 애플리케이션의 상태에 input 입력값을 쉽고 빠르게 얻을 수 있고, 활용이 가능하다.
• v-model을 사용하여 부모는 입력되는 값을 받을 수 있다.
• vue3에서 다수의 바인딩을 할 때 더 강력하고 유연하게 설계가 되었다.

Navite inputs으로 알아보자(Kicking it off with Native inputs)

• vue2에서 v-model을 input 요소에 추가할 때마다, 컴파일러가 올바른 input value와 event를 처리하는 코드를 생성한다.
• type을 input, email, checkbox...등으로 동적으로 변경해야 될 때가 있다.
• vue2에서 런타임때 어떤 타입인지 예측할 수가 없으므로, vue2 컴파일러에서 가능한 코드를 모두 적어야 되므로 코드가 길어진다.

v-model을 컴파일 해보자(How does it compile?)

• Vue2 컴파일 코드

  

• vue2에서 v-model을 컴파일하면 어마어마하게 길어진다. 그 이유는 위에서 말했던 것처럼 모든 가능한 시나리오에 대응해야 되기 때문이다.

• vue3는 vue2와 다르게 v-model 코드길이가 엄청 간결해졌다. v-model을 쓰는 input요소랑 거의 같은 방식으로 동작하기 때문이다.

• props와 event는 다른 추가 모듈을 사용해 활용할 수 있다.

• Vue3 컴파일 코드

h('input', {
  modelValue: myValue,
  'onUpdate:modelValue': value => {
     myValue = value
   }
})

v-model 기본 코드(The new defaults)

• vue3는 v-model이 있는 컴포넌트에 v-model 바인딩할때 새 기본값을 사용한다.
• vue2는 v-model이 있는 컴포넌트에 v-model 바인딩할때 컴포넌트 인풋 타입에 상관없이 value 프로퍼티랑 input 이벤트를 수신한다.(v-model을 커스텀하면 변경 가능하지만 너무 깊으니깐 접근하지 않는다.)
• vue3에서는 2가지 기본값이 추가되었다.
• 입력된 값을 props에 바인딩하기 위해 modelValue, emit하기 위해 update:modelValue가 있다.
• update:modelValue이 코드가 생소할 수 있으나 우선 이렇게 이해하고 넘어가자.
• update는 업데이트 된다는 선언, modelValue는 업데이트 중인 모델
• vue3에서 v-model를 사용하는 wrapper component를 만들어보자

<template>
  <input
    :value="modelValue"
    @input="$emit(
      'update:modelValue',
      $event.target.value
    )"
  >
</template>

<script>
export default {
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    }
  }
}
</script>

BaseInput 컴포넌트 사용(Using the new v-model in component instances)

• 이제 v-model를 사용하는 컴포넌트를 작성해보자. (Composition API를 사용하지 않았다.)

<template>
  <div>
    <BaseInput
      v-model="myInput"
    />
  </div>
</template>

<script>
import BaseInput from './BaseInput'

export default {
  components: { BaseInput },
  data() {
    return {
      myInput: ''
    }
  }
}
</script>

• 현재까지 vue2랑 사용하는 방법이 크게 차이 나지 않는다.
• v-model="myInput"은 v-model:modelValue="myInput"에 축약형이다.

결론

이번 포스팅은 여기까지다.
맛만 보고 끝낸것도 아니고 냄새만 맡고 끝난 느낌이다.
다음 포스팅부터 vue3에서 v-model시스템을 잘 다뤄보고 멀티 v-model 바인딩도 살펴보겠다. :)

2020/10/22 - [개발일기/Vue.js] - Vue.Js 3 Composition API 살펴보기 - 1(setup, reactive,methods, computed)

Vue.Js 3 Composition API 살펴보기 - 1(setup, reactive,methods, computed)

2020/10/23 - [개발일기/Vue.js] - Vue.Js 3 Composition API 살펴보기 - 2(Methods, Computed, The Reactive Syntax)

Vue.Js 3 Composition API 살펴보기 - 2(Methods, Computed, The Reactive Syntax)

2020/10/26 - [개발일기/Vue.js] - Vue.Js 3 Composition API 살펴보기 - 3(Modularzing, LifeCycle Hooks, Watch)

Vue.Js 3 Composition API 살펴보기 - 3(Modularzing, LifeCycle Hooks, Watch)

2020/10/26 - [개발일기/Vue.js] - Vue.Js 3 Composition API에 대해 알아보자 - 4(Sharing State, Suspense)

Vue.Js 3 Composition API에 대해 알아보자 - 4(Sharing State, Suspense)

2020/10/28 - [개발일기/Vue.js] - Vue.Js 3 Composition API 살펴보기 - 5(Teleport)

Vue.Js 3 Composition API 살펴보기 - 5(Teleport)