vue2 ♺ vue3

제이밍·2021년 12월 2일
1
post-thumbnail

vue2와 vue3 차이

vue2와 vue3의 일부 내용만 정리된 것이며 자세한 내용은 공식문서를 확인해주세요
https://v3.vuejs.org/guide/introduction.html

App.vue

$ vue create vue-project

//vue2
export default Vue.extend({
  name:"App",
  components: {
    HelloWorld,
  },
  data(){
    return {
      str: "hi",
    };
  }
})

//vue3
export default defindComponent({
  name:"App",
  components: {
    HelloWorld,
  },
  data(){
    return {
      str: "hi",
    };
  }
})

가장 쉽게 구분되는 차이점은 App.vue에서 사용되는 api 문법이 Vue.extend에서 defindComponent로 바뀌었다는 것을 확인 할 수 있습니다.

이외에도 뷰 내부에서 사용하는 코드들에 대한 타입들이 다양해졌다. 타입스크립트에 대한 지원이 강해졌다고 할 수 있습니다.

mixins(data,methods)의 대체품 setup()

hoc 를 이용해 반복되는 코드를 재활용 할 수 있던 mixins에 여러 문제점이 있었는데요,
mixins와 hoc의 문제점링크

vue3에서 지원되는 setup() 안에서 ref를 사용하여 data에 접근해 값을 간단하게 수정할 수 있다.

//vue2
export default defineComponent({
  data(){
    return {
      str: "",
    };
  },
  methods:{
    changeString(){
      this.str = "hi";
    },
  },
});
//vue3
export default defineComponent({
	setup(){
      const str = ref("");
      str.value = "hi";
      return {str}
    },
});

첫번째 코드두번째 코드는 같은 동작을 하는코드임에도 확실히 코드량이 줄었고, 가독성이 좋아진것을 확인 할 수 있습니다.

vue2도 더욱 강화된다?

Evan You의 문서에 따르면...

  1. 우리가 vue3와 vue2의 가장 큰 차이점이라고 생각했던 @vue/composition-api plugin 같은 경우 원래 vue2부터 지원되어져 왔고, vue2에서도 3와 거의 동일하게 적용될 수 있다고 합니다.

  2. vue2 에도 <script setup>문법이 지원된다.

  3. 타입스크립트를 위한 타입들이 impove 된다.

  4. Vite나 여러가지 새로운 문법들은 계속돼서 지원 될 것이다.

vue3는 더이상 IE11 지원을 하지 않는다.

결론

아직 vue3 생태계가 완성되어 있지 않은 상태이고 vue2도 계속해서 서포트될 예정이기 때문에 당분간은 vue2와 vue3사이에서 고민해봐야 하는 시간이지 않을까 하는 생각이 든다.

reference

https://github.com/vuejs/vue
https://v3.vuejs.org/guide/introduction.html

profile
모르는것은 그때그때 기록하기

0개의 댓글