vue2 ♺ vue3

제이밍·2021년 12월 2일

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의 문서에 따르면...

우리가 vue3와 vue2의 가장 큰 차이점이라고 생각했던 @vue/composition-api plugin 같은 경우 원래 vue2부터 지원되어져 왔고, vue2에서도 3와 거의 동일하게 적용될 수 있다고 합니다.
vue2 에도 <script setup>문법이 지원된다.
타입스크립트를 위한 타입들이 impove 된다.
Vite나 여러가지 새로운 문법들은 계속돼서 지원 될 것이다.