Vue 3.0 - 2.0 과 3.0 의 차이

Vue3 변경 내용

전역 API 또는 응용 프로그램 만들기

• Vue2 버전의 앱 생성구문

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

• Vue 버전 3에서는 새로운 .createApp 메서드를 사용하여 새 응용 프로그램을 만듦

import Vue, { createApp } from 'vue';
​
createApp(App)
.use(store)
.mount("#app");

새 컴포넌트 정의

• Vue2

Vue.component('component-name',
{  
    // component code here
})

• Vue3

const app = Vue.createApp({…})
app.component(‘component-name’){
  ///Component code
}

데이터 옵션 사용

Vue 3에서는 필요한 모든 객체를 반환하는 함수로 데이터를 간주

const app = new Vue({
  // options object
  el: '#app'
  data:
  {
        object: <some object>
  }
})

Vue 3에서는 데이터를 다음과 같이 사용

const app = Vue.createApp({
// options object    
data(){
      return {
          object: <some object or string etc>
    }
  }
})