vue2 vue3 created, setup 비교.

vue2와 vue3는 많은 변경점이 있었지만 아마도 가장 와닿는 변화는 스크립트단의 라이프싸이클일것이다.
beforeCreated, created가 setup으로 대체되었으며 data에서 선언하던것도 대부분 setup으로 넘어가 data를 쓸일이 거의 없어졌다.
현재 vue3에서도 created나 data는 활용 가능하지만, 권장하는 방법이 아니기에..

vue2의 경우

<template>
    <div>{{text}}</div>
</template>
<script>
export defalut {
    data() {
        return {
            text : "1",
        }
    }
    created() {
        console.log(this.text) //1이 찍힘
    }
}
</script>

으로 활용한다.

vue3의 경우 vue2에 비하면 상당히 번거로워졌다.

<template>
    <div>{{data.text}}</div>
</template>
<script>
import { reactive } from "vue";
export defalut {
    setup() {
        const data = reactive({
            text : "1"
        });
    return {
        data
    }
}
</script>

이런식으로 활용해야 한다.

위의 방법처럼 번거로워진 이유는 vue2에서 실제로 활용되지 않음에도 불구하고 할당 되어 자리를 차지하는 부분이 많았고 이것은 곧 속도 이슈로 이어져있기도 하고, props나 data나 this로 접근할때 구분이 가지 않았던 설계적 문제때문인듯 하다.