2023년 12월 28일 Vue 3.4 발표
관련 내용 정리
▪︎ 필요한 종속성 업데이트
Volar/vue-tsc@^1.8.27(필수)@vitejs/plugin-vue@^5.0.0(Vite를 사용하는 경우)nuxt@^3.9.0(Nuxt를 사용하는 경우)vue-loader@^17.4.0(webpack 또는 vue-cli를 사용하는 경우)
▪︎ 템플릿 파서 개선
Vue.js 3.4에서는 템플릿 파서를 완전히 다시 작성 이전에 사용되던 재귀 하강 파서 대신에 상태 머신 토크나이저(htmlparser2)를 사용하여 모든 크기의 템플릿에 대해 이전 버전보다 두 배 빠른 파서가 만들어졌습니다.
*템플릿 파서(Template Parser)
Vue.js에서 사용자가 작성한 템플릿 코드를 해석하고 가상 DOM 구조로 변환하는 역할-
이전 템플릿 파서
Vue.js의 이전 버전에서는 정규식과 재귀 하강 파서를 사용하여 템플릿을 처리한다.
정규식은 특정 패턴을 찾아내기 위해 사용되었고, 재귀 하강 파서는 템플릿의 각 부분을 순차적으로 처리한다. -
새로운 템플릿 파서
Vue.js 3.4에서는 이전의 방식 대신에 htmlparser2의 토크나이저를 기반으로 하는 상태 머신 토크나이저를 사용한다.
htmlparser2는 외부 라이브러리로서 HTML을 파싱하기 위한 도구 중 하나로
상태 머신 토크나이저는 템플릿을 더 효율적으로 처리하기 위한 기술적인 개선됨
상태 머신은 토큰화(템플릿을 작은 단위로 나누는 과정)를 처리하는데, 각 토큰을 인식하고 그에 따른 상태 전이를 수행하는 방식으로 동작한다.
▪︎ SFC 빌드 성능 향상
빌드 프로세스에서는 다양한 작업이 수행되는데, 그 중에서도 Vue 템플릿 처리 속도가 높은 영향을 미친다. Vue SFC의 빌드 과정에서는 해당 파일의 템플릿 부분을 파싱하고 가상 DOM을 생성하는 등의 작업이 이루진다. 따라서 새로운 Vue.js 3.4 파서의 도입은 템플릿 처리 속도를 향상시켜서 Vue SFC 빌드 시간을 단축하는데 기여한다.
▪︎ 반응성 시스템을 개선
- watchEffect 최적화
이전 버전에서는 계산된 속성이 변경될 때마다 watchEffect 콜백이 실행되었다.
하지만 3.4에서는 계산된 결과가 변경된 경우에만 콜백이 실행된다.
따라서 계산 결과가 동일하더라도 변경 사항이 없다면 콜백이 실행되지 않아 불필요한 작업이 줄어든다.
import { ref, watchEffect } from 'vue'
const count = ref(0)
const isEven = computed(() => count.value % 2 === 0)
watchEffect(() => console.log(isEven.value)) // logs true
// 이제는 isEven가 변경되어야만 콜백이 실행됨
count.value = 2 // logs X- 다중 계산된 속성의 동기화 효과 개선
여러 개의 계산된 속성이 변경될 때 동기화 효과가 한 번만 트리거되도록 개선되었습니다. 이전에는 각 속성의 변경마다 별도로 트리거되던 것을 효율적으로 최적화하여 한 번만 트리거됩니다.
- 배열 메소드 동기화 효과 개선
배열의 shift, unshift, splice와 같은 메소드를 사용할 때도 동기화 효과가 한 번만 트리거되도록 개선되었습니다. 배열이 변경될 때마다 효과가 한 번만 발생하여 성능을 향상시킵니다.
▪︎ defineModel 안정화
defineModel
v-model에 modelValue를 선언하고 emit을 통해 업데이트 해야하는 update:propName을 전달하는 과정을 v-model에 선언한 modelValue를 바로 defineModel()로 연결하여 자동으로 props하고 emit까지 처리할 수 있는 ref를 반환하게 해준다.
<script setup>
const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
function onInput(e) {
emit('update:modelValue', e.target.value);
}
</script>
<template>
<input :value="modelValue" @input="onInput"/>
</template>위 과정을 아래와 같이 변경할 수 있다.
<script setup>
const modelValue = defineModel();
</script>
<template>
<input v-model="modelValue"/>
</template>▪︎ v-bind 동명 속기
JavaScript에서 오브젝트에 값을 할당할 때, 변수명과 프로퍼티 이름이 동일한 경우
단축 속성명을 사용하여 간결하게 코드를 작성할 수 있다.
이번 버전에서 위 내용과 비슷하게 v-bind 에서 단축을 할 수 있도록 업데이트 됐습니다.
<img :id="id" :src="src" :alt="alt">위 방식을 아래처럼 단축할 수 있습니다.
<img :id :src :alt>▪︎ 향상된 수화 불일치 오류
수화 불일치
Vue.js에서 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 간에 발생할 수 있는 렌더링의 불일치
Vue.js에서는 어플리케이션을 서버에서 초기 렌더링하고, 클라이언트에서는 해당 어플리케이션을 "수화"하여 상호작용성을 부여합니다. 이때 서버에서 렌더링한 초기 상태와 클라이언트에서의 수화 과정에서 발생할 수 있는 차이가 수화 불일치로 간주한다.
이 오류 메시지의 향상된 버전이 도입되었습니다. 이를 통해 오류 메시지가 더 명확하게 이해되고, 문제가 발생한 DOM 노드를 빠르게 식별할 수 있도록 도와준다.
또한 동적으로 바인딩된 클래스, 스타일 및 기타 속성에 대한 수화 불일치 검사도 향상됐다.
▪︎ 기능 제거
전역 JSX 네임스페이스
JSX를 사용할 때 더 이상 기본적으로 전역 네임스페이스를 등록하지 않습니다.
이 변경은 React와 같은 다른 라이브러리와 함께 사용할 때 전역 네임스페이스 충돌을 피하기 위한 것
Reactivity Transform 실험적인 기능 완전 삭제
Reactive 객체를 구조분해할 때 리액티비티가 손실되는걸 막고 refs를 사용할 때마다 .value를 일일이 입력하는 것을 방지하는 기능
Reference
