Vue 3.4 변경점 파헤치기

1. Vue 3.4 변경점 파헤치기

• 23년 12월 29일에 Vue 3.4 버전이 출시되고, 여러 기능이 추가되었다.
• 이번 시간에는 어떤 기능이 출시되고, 어떤 점이 변경되었는지 ChangeLog.md를 토대로 살펴보았다 🙂

(1) v-bind의 키와 값이 같다면 짧게

• JS에서는 키와 값 변수가 같은 경우, 축약할 수 있다. (property shorthand)

const age = 12;

const person = { 
  name: 'luxxxx',
  age: age   // 축약 전
}

const person = { 
  name: 'luxxxx',
  age     // 축약 후
}

• v3.4에서는 property shorthand 형태로, 값 바인딩(v-bind)을 축약할 수 있다. (공식문서)
• 아래 코드는 속성키(src)와 값(src)이 같아 축약한 예시이다.

<template>
    <img v-bind:src="src" />  <!-- 축약 전 -->
    <img v-bind:src />        <!-- 축약 후(1) -->
    <img :src />              <!-- 축약 후(2) -->
</template>

<script setup>
import { ref } from 'vue'

const src = ref('Hello World!');
</script>

• v-bind이외에도 v-slot도 축약형으로 사용할 수 있다. (공식문서)

<template #[dynamicSlotName]>
  ...
</template> 

(2) validator에 props 값 접근 가능

• 3.4 이전 버전에서, props의 validator에서 현재 prop값만 인자로 제공했다.

const props = defineProps({
  name: {
    type: Number,
    validator: (value) => ( ... )  // 현재 prop값만 사용 가능
  }
});

• 그러나 3.4 버전에서는 props 유효성 검사를 할 때, 다른 props 값을 사용할 수 있다.

interface PropOptions<T = any, D = T> {
  validator?(value: unknown, props: Data): boolean  // value(현재값), props(다른 props값)
  ...
}

const props = defineProps({
  name: {
    type: Number,
    validator: (value, props) => ( ... )
  }
});

• 한 예시로, props로 넘긴 value값이 props.min, props.max 사이인지 validator로 검사할 수 있다.

<script setup>
const props = defineProps({
  min: {
        type: Number,
        default: 0,
    }
  max: {
        type: Number,
        default: 10,
    }
  value: {
    type: Number,
    validator: (value, props) => {
      // value는 min이상 max이하인 값만 유효함
            return value >= props.min && value <= props.max;
        }
  }
});

</script>

(3) defindModel로 v-model를 쉽게 컨트롤

• 3.4 버전 이전에는 props 데이터를 하위 컴포넌트에서 수정할 때 emit 이벤트를 전송해야했다.
• 아래 코드는 버튼 클릭시, emit 이벤트로 props 데이터를 변경하는 예시이다.

<!-- Parent.vue -->

<template>
  <Child :count="count" @btn-count-clicked="() => count++" />
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

<!-- Child.vue -->

<template>
  <button @click="emit('btn-count-clicked')">숫자 증가</button>
</template>

<script setup>
const props = defineProps({
  count: {
    type: Number,
        default: 0
  }
});
const emit = defineEmits(['btn-count-clicked']);
</script>

• 3.4 버전 이후에는 좀 더 간단한 방법으로 props 데이터를 컨트롤 할 수 있다.
• 하위 컴포넌트에서 defineModel을 사용하면, props 데이터를 변경할 수 있다.

<!-- Child.vue -->

<template>
  <button @click="count++">숫자 증가</button>
</template>

<script setup>
const count = defineModel('count', { type: Number, default: 0 });
</script>

(4) watch를 한번만 감지할 수 있다

• 특정 값이 변경되었는지 한 번만 감지할 수 없을까?
• 3.4 버전 이전에는 값을 한 번만 감지하고 싶다면 unwatch 를 써야 했다. (playground 보기)

const unwatcher = watch(text, () => {
  console.log('text 변경');
  unwatcher();   // watch가 실행되면, watch 중단시킴
});

• 하지만 3.4 버전에서 once 옵션이 제공되어, watch에서 값 변경을 한 번만 감지할 수 있다! (문서 보기)

watch(count, cb, { once: true });

• 작동 예시는 playground에서 볼 수 있다.

const unwatcher = watch(text, () => {
  console.log('text 변수의 변화를 한 번만 감지한다');
}, { once: true });

(5) computed에서 oldValue 접근

• computed에서 setter & getter로, 계산값을 수정하거나 리턴할 수 있었다.

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed({
  get() {
    return firstName.value + ' ' + lastName.value;
  },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ');
  }
})

• 3.4 버전에서는 getter에 oldValue 인자가 추가되었다.

ComputedGetter<T> = (oldValue?: T) => T;

• 그래서 computed의 getter에서 계산값의 이전값을 사용할 수 있다.
• 실제 실행 예시는 playground에서 볼 수 있다.

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed({
  get(oldValue) {
    if (!oldValue) return firstName.value;
    else return firstName.value + ' ' + oldValue;
  },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

2. 마치며…

• 이번 시간에는 vue/core 레포의 ChangeLog.md에서 3.4 변경점을 확인해보았다.
• v-bind을 축약형으로 선언할 수 있고, props를 간단히 컨트롤 할 수 있으며, once 옵션으로 데이터를 한 번만 감지하는 기능 등이 추가되었다.
• 현재로서 Docs에 모든 내용이 작성되어 있지 않아, 변경점을 추적하고 싶다면 ChangeLog.md를 보는 것도 방법이다.