Vue 3 -새로운 기능, 혁신적인 변화 및 마이그레이션 경로

Vue 3 is here 모든 사람들이 이전 방법을 찾고 있으며 가능한 한 빨리 그것을 사용하기 시작한다.몇 가지 새로운 기능이 있지만 성능을 향상시키고 패키지 크기의 엔진 뚜껑을 덮어 이 버전을 진정한 후보로 만들고 가장 좋은 클라이언트 프레임워크가 존재하도록 많은 작업을 했다.함정새로운 문법, 반대 의견, 그리고 돌파적인 변경은 당신의 이전 계획을 예상보다 약간 어렵게 할 수 있습니다.우리가 몰입해서 네가 무엇을 기대해야 하는지 보자.

설치하다.
네가 만나게 될 첫 번째 일은 프로그램을 초기화할 때의 차이이다.Vue 2에서는 다음과 같이 Vue 구조 함수를 렌더링 함수 및 $mount 메서드와 함께 사용해야 합니다.

    import Vue from 'vue'

    import App from './app.vue'

    const app = new Vue({
      render: (h) => h(App),
    }).$mount('#app')

Vue 3에서는 더 우아한 문법으로 간소화

    import { createApp } from "vue";

    import App from "./App.vue";

    createApp(App).mount("#app");

조각조각
Vue 2에서는 다중 어셈블리가 지원되지 않습니다.해결 방안은 코드를 포장기 요소에 봉인하는 것이다.

    <!-- Layout.vue -->
    <template>
      <div>
        <header>...</header>
        <main>...</main>
        <footer>...</footer>
      </div>
    </template>

이제 Vue 3에서 어셈블리에 여러 개의 루트 노드가 있을 수 있습니다.이것은 포장기 요소를 제거하고 더욱 뚜렷한 표시를 작성할 수 있다.

    <!-- Layout.vue -->
    <template>
      <header>...</header>
      <main>...</main>
      <footer>...</footer>
    </template>

전송
흔치 않지만 해결하기 어려운 문제는 일부 구성 요소를 DOM에서 Vue 구성 요소의 차원 구조와 다른 위치에 설치하는 것이다.
일반적인 장면은 전체 화면 모드를 포함하는 구성 요소를 만드는 것입니다.대부분의 경우 모드의 논리가 구성 요소에 존재하기를 원하지만, 모드의 포지셔닝은 CSS를 통해 해결하기 어렵거나 구성 요소의 구성을 변경해야 합니다.
이런 전송 기능을 사용하면 지금 이 점을 쉽게 실현할 수 있다

    app.component('app-modal', {
      template: `
        <button @click="isOpen = true">
            Open modal
        </button>

        <teleport to="body">
          <div v-if="isOpen" class="modal">
              I'm a teleported modal
          </div>
        </teleport>
      `,
      data() {
        return { 
          isOpen: false
        }
      }
    })

구성 요소 내부에서처럼 상호작용을 하고 도구를 전달할 수 있습니다!

발산하다
발사 사건의 방식은 변하지 않았지만, 이렇게 조립품에서 발사를 성명할 수 있다

    export default {
      name: 'componentName',
      emits: ['eventName']
    }

이것은 강제적인 것이 아니지만, 문서화 코드를 지원하기 때문에 최선의 실천으로 여겨져야 한다

합성 API
June 2019년에 처음 도입되었을 때 매우 논란이 된 화제는 함수 기반의 새로운 구성 요소 API였다.기존 Options API와 크게 달라 한눈에 혼선을 빚었다.좋은 점은 기존의 Options API가 기용되지 않았고 고급 용례를 처리하는 데 있어서 모든 것이 순수한 덧셈으로 주로 Mixin의 사용을 대체했다. 물론 Mixin의 사용은 대규모 응용에서 많은 문제를 초래했다.
새로운 Composition API는 논리적 조직, 캡슐화 및 재사용을 위해 설계되었으며, 이는 어셈블리 인스턴스와 관계없이 매우 유연하고 고성능이며 각 어셈블리 속성의 소스를 쉽게 추적할 수 있도록 해줍니다.
다음은 새 API를 사용하여 어셈블리를 구성하는 간단한 예입니다.

    <template>
      <button @click="increment">
        Count is: {{ state.count }}, double is: {{ state.double }}
      </button>
    </template>

    <script>
    import { reactive, computed } from 'vue'

    export default {
      setup() {
        const state = reactive({
          count: 0,
          double: computed(() => state.count * 2)
        })

        function increment() {
          state.count++
        }

        return {
          state,
          increment
        }
      }
    }
    </script>

Vue2가 알고 있는 단순한 학습 곡선과 일치하지 않기 때문에 익히는 데 시간이 좀 걸린다는 것이 주요 단점이다.좋습니다. 새 API를 사용하여 기존 구성 요소를 다시 쓸 필요도 없고, 어느 곳에서도 사용할 필요도 없습니다.
신제품에 대한 자세한 정보 보기Composition API RFC

기능 구성 요소
기능 구성 요소가 사용되지 않습니다.기능 구성 요소를 사용하는 주요 원인은 성능인데, 성능은 현재 더 이상 상관이 없습니다. 구성 요소의 실례화와 컴파일 과정에서 진행된 변경으로 인해 이러한 차이는 중요하지 않게 변했습니다.불행하게도, 이러한 변경은 약간의 수동 이동이 필요할 것이다.

역할 도메인 슬롯
만약 그것을 사용한다면 재구성할 때 매우 고통스러울 수 있는 변화는 작용역 슬롯을 제거하는 것이다.이제 슬롯과 병합됩니다.

    // Vue 2 Syntax
    this.$scopedSlots.header

    // Vue 3 Syntax
    this.$slots.header()

액티브 버스
$on, $once, $off 방법은 Vue 실례에서 삭제되기 때문에 Vue 3에서는 이벤트 버스를 만드는 데 사용할 수 없습니다.Vue 설명서mitt 라이브러리를 사용하는 것이 좋습니다.Vue 2와 동일한 API로 매우 작습니다.

필터
Vue 3에서 필터가 제거되었습니다!실제로 작은 플러그인에서 같은 기능을 할 수 있지만, 필터의 파이프가 자바스크립트와 비트 연산자가 충돌한다는 사실은 필터가 있는 표현식이 올바르지 않다는 것을 의미합니다.이것이 바로 왜 한 가지 방법을 사용하자고 건의한 까닭이다.

    // Vue 2 Syntax
    {{ msg | format }}

    // Vue 3 Alternative
    {{ format(msg) }}

이렇게 하는 단점은 여러 개의 링크를 연결하는 방법이 여러 개의 필터를 연결하는 것보다 우아하지 않지만 대가가 적다는 것이다.

    // Vue 2 Syntax
    msg | uppercase | reverse | pluralize
    // Vue 3 Alternative
    pluralize(reverse(uppercase(msg)))

IE11 지원
IE11은 기본 번들에서 지원되지 않습니다.운이 나쁘면 지원하지 않으면, Vue 3에서 사용하는 에이전트와 같은 추가 파일을 가방에 포함해야 한다.

Vuex
Vuex 4도 Vue 3에 맞춰 출시되었습니다.API는 그대로 유지되며 코드는 이전 버전과 호환됩니다.실망너는 마땅히 해야 한다!마이그레이션이 한 가지 더 줄어들었습니다. 곧 Vuex 5가 도착합니다. 곧 변화가 발생할 수 있도록 하세요.돌연변이와 플러그인 모듈을 삭제하는 것은 단지 몇 가지 예를 들 뿐이다.
Vuex 5 제안에 대한 자세한 내용 보기

Vue 3으로 마이그레이션 계획

공식 성명 낭독migration guide

이벤트 버스 사용법을 mitt 라이브러리

로 교체

역할 도메인 슬롯을 일반 슬롯으로 업데이트

방법

으로 필터 교체

Vue 2.7로 업그레이드 - 이 릴리즈에서는 Vue 3과 호환되지 않는 각 기능에 대해 사용 중지 경고를 표시하고 각 상황을 처리하는 방법에 대한 문서 링크를 제공합니다.

Vue 3

으로 업그레이드
이것은 프로젝트의 규모와 현재 사용하고 있는 추천하지 않는 기능에 따라 긴 과정일 수도 있다는 것을 명심하십시오.이것은 당신의 첫 번째 임무가 아닐 수도 있지만, 거대한 성능 개선과 우아한 새로운 조합인 API를 고려하면, 이것은 절대로 가치가 있다.