[ Vue3 ] Vue3 바뀐 점 정리

Vue 3

---

핵심요약

• Composition API가 들어오면서 데이터 선언, 함수 선언, 상태 관리 등의 변화
• 컴포넌트 내에서 데이터, 함수, 상태를 호출하는 방식도 변화

 

 

템플릿 생성 방식의 변화

여러 개의 루트 엘리먼트

• Vue2의 템플릿은 하나의 루트 엘리먼트만 허용하였지만,  Vue3 부터는 여러 개의 루트 엘리먼트를 갖는 컴포넌트를 지원한다. ( 불필요한 wrapper div(단지 감싸주기용의 div..같은..)가 필요없어질 것 같다. )
• 하지만, 여러 개의 루트 엘리먼트를 사용하는 것을 권장하지는 않는다.

템플릿에서 데이터 호출 방식

• 기존에는 props나 method 등을 구분없이 이름만으로 호출할 수 있었는데, 이제는 분리가 가능해졌다.
  

  <template>
  	<div>
  		{{state.xx}}
      </div>
  </template>​

 

Data, Method 작성 방식의 변화

setup 등장

• Vue3의 가장 큰 변화라고 볼 수 있다.
• 기존의 data, method 등의 선언이 전부 setup이라는 메소드 안으로 편입되었다.Vue 2. x Vue 3

  export default { props: { title: String }, data () { return { username: '', password: '' } }, methods: { login () { // login method } } }	export default { props: { title: String }, setup () { const state = reactive({ username: '', password: '' }) const login = () => { // login method } return { login, state } } }
  - props, data, methods 가 같은 계층에 있음	- props, setup이 같은 계층이 있음 - data → state로 methods들은 각각의 함수로 작성되어 한방에 반환되도록 변화 - state의 경우, vue reactive를 사용 - Reactive는 Vue가 반응현 시스템을 유지하기 위해서 사용하는 간단한 js객체

• Vue2에서 data나 method, computed 등을 선언하게 되면 자동으로 reactive객체를 생성해주었었지만, 이 과정이 묵시적이었고 User들은 과정을 알 필요가 없었다.
• Vue3에서 타입스크립트의 지원이나 state로의 명칭 변경, 명시적 reactive 사용 등을 보았을 때, 명시적인 선언을 지향하는 방향으로 변화한 것으로 보인다.

Lifecycle hook 호출의 변화

setup 내부에서의 lifecycle hook을 선언한다.

• 기존에 존재하던 라이플사이클 훅의 종류는 거의 그대로 유지된다.
  

  import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, 
  onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'
      
      export default {
        setup() {
          onBeforeMount(() => {
            // ... 
          })
          onMounted(() => {
            // ... 
          })
          onBeforeUpdate(() => {
            // ... 
          })
          onUpdated(() => {
            // ... 
          })
          onBeforeUnmount(() => {
            // ... 
          })
          onUnmounted(() => {
            // ... 
          })
          onActivated(() => {
            // ... 
          })
          onDeactivated(() => {
            // ... 
          })
          onErrorCaptured(() => {
            // ... 
          })
        }
      }​

• 라이프사이클 훅은 리턴할 필요가 없다.

Computed 속성 사용의 변화

state 선언문 내에 선언 구문을 추가하는 방식

• 기존의 Computed 속성
  

  export default {
        // .. 
        computed: {
          lowerCaseUsername () {
            return this.username.toLowerCase()
          }
        }
      }​

• Vue3의 Computed 속성
  

  import { reactive, computed } from 'vue'
      
      export default {
        props: {
          title: String
        },
        setup () {
          const state = reactive({
            username: '',
            password: '',
            lowerCaseUsername: computed(() => state.username.toLowerCase())
          })
      
          // ...
        }

Composition API의 이해

composition API

• 기존의 Vue는 Options API라는 것을 사용하였다(data, computed, methods 등을 사용). 이는 굉장히 직관적이지만 컴포넌트의 크기가 커졌을 때 유지보수가 굉장히 어려워지는 문제가 있었다.
• 이런 유지보수 측면의 해결방안으로 나온 것으로 생각할 수 있다.

composition API 예제

• 예제
  

  import { reactive, computed } from 'vue'
      
      export default {
        props: {
          title: String
        },
        setup () {
          const state = reactive({
            username: '',
            password: '',
            lowerCaseUsername: computed(() => state.username.toLowerCase())
          })
      
      		const changeName = (name) => {
      			state.username = name
      		}
        }​

• Vue의 핵심 기능들을 전부 임포트하는 대신 직접 선택해서 임포트 할 수 있도록 해준다.
  

  import { reactive, computed } from 'vue'

• setup 메소드는 Composition API의 핵심으로, 컴포넌트의 기능들을 조립하는 역할을 한다.
• setup 안에 라이프사이클 훅을 걸거나 반응형 데이터 바인딩, computed 사용 등을 할 수 있다.
  

  export default{
      setup () {
  	}
  }​

• 컴포넌트 내부에서 사용하기 위한 상태 값으로 data대신에 state를 선언하고 reactive obj로 초기화 한다. 
  

  const state = reactive({
            username: '',
            password: '',
            lowerCaseUsername: computed(() => state.username.toLowerCase())
          })​

• 함수의 선언은 다음과 같이하며, state등을 호출할 때 this 바인딩이 필요하지 않다.
  

  const changeName = (name) => {
      	state.username = name
      }​

• 마지막에 setup의 return에 포함시켜준다. return { state, changeName };
  

  return { 
      	state, 
      	changeName
      };

composition API의 장점

• API로 생성한 reactive 데이터들은 템플릿에만 꼭 쓰지 않아도 되는 장점이 있다.
• 컴포넌트와 별개로 사용할 수 있는 반응성 데이터를 생성할 수 있다.
• 컴포넌트 옵션 속성이 존재하기 전에 setup API가 실행되므로 this로 컴포넌트를 접근할 수 없다.(대신 context를 사용한다)
  

  setup(props, context){
  	context.attrs
  	context.slots
  	context.parent
  	context.root
  	context.emit
  }

props와 this 바인딩의 분리

props에 접근하는 방법

• 기존의 방법 → this.title이 props? data? methos? 모호하다.
  

  mounted () {
          console.log('title: ' + this.title)
      }​

• 새로운 방법 → props를 attribute로 받아서 사용한다. 
  

  setup (props) {
          // ...
          onMounted(() => {
            console.log('title: ' + props.title)
          })
          // ...
      }

emit과 this 바인딩의 분리

emit 사용의 변화

• 기존의 방법
  

  login () {
            this.$emit('login', {
              username: this.username,
              password: this.password
            })
       }

• 새로운 방법
  

  setup (props, { emit }) {
          // ...
      
          const login = () => {
            emit('login', {
              username: state.username,
              password: state.password
            })
          }
      
          // ...
      }​

참고링크

Vue 3 변경점 정리: 무엇이 바뀌나요?

---

 

CPDM