Vuejs3부터는 다양한 방식으로 script를 구현할 수 있다.

그 중에서 가장 효율적인 방법이 무엇인지 나름대로 정리해보고자 한다.

Options API 방식으로 구현하기

TestOption.vue

<template>    
    <h3>option</h3>
    <div>
        <input v-model="name" />
        <input v-model="birth" type="number" />
    </div>
    <TestOptionItem :name="name" :birth="birth" />
    <div>
        <button @click="add">add</button>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import TestOptionItem from './TestOptionItem.vue'

export default defineComponent({
    name: 'TestOption',
    components: { TestOptionItem },
    data () {
        return {
            name: 'abc',
            birth: 2000,
        }
    },
    methods: {
        add () {
            this.name += ' add'
        }
    }
})
</script>

TestOptionItem.vue

<template>    
    <h5>
        TestOptionItem
    </h5>
    <div>
        name: {{ name }}
        birth: {{ birth }}
        age: {{ age }}
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'TestOptionItem',
    props: {
        name: {
            type: String,
            required: true
        },
        birth: {
            type: Number,
            required: true
        }
    },
    computed: {
        age () {
            return 2023 - this.birth
        }
    }
})
</script>

Composition API 방식으로 구현하기

TestComposition.vue

<template>    
    <h3>composition</h3>
    <div>
        <input v-model="name" />
        <input v-model="birth" type="number" />
    </div>
    <TestCompositionItem :name="name" :birth="birth" />
    <div>
        <button @click="add">add</button>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import TestCompositionItem from './TestCompositionItem.vue'

export default defineComponent({
    name: 'TestComposition',
    components: { TestCompositionItem },
    setup () {
        const name = ref('abc');
        const birth = ref(2000);
        const add = () => {
            name.value += ' add'
        }
        return {
            name,
            birth,
            add
        }
    }
})
</script>

TestCompositionItem.vue

<template>    
    <h5>
        TestCompositionItem
    </h5>
    <div>
        name: {{ name }}
        birth: {{ birth }}
        age: {{ age }}
    </div>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'

export default defineComponent({
    name: 'TestCompositionItem',
    props: {
        name: {
            type: String,
            required: true
        },
        birth: {
            type: Number,
            required: true
        }
    },
    setup(props) {
        const age =  computed(() => 2023 - props.birth)
        return { age }
    }
})
</script>

Script-Setup 방식으로 구현하기

TestSetup.vue

<script setup lang="ts">
import { ref } from 'vue'
import TestSetupItem from './TestSetupItem.vue'
const name = ref('abc')
const birth = ref(2000)
const add = () => { name.value += ' add'}
</script>
<template>    
    <h3>setup</h3>
    <div>
        <input v-model="name" />
        <input v-model="birth" type="number" />
    </div>
    <TestSetupItem :name="name" :birth="birth" />
    <div>
        <button @click="add">add</button>
    </div>
</template>

TestSetupItem.vue

<script setup lang="ts">
import { defineProps, computed } from 'vue'
const props = defineProps<{ name: string, birth: number}>()
const age =  computed(() => 2023 - props.birth)
</script>
<template>    
    <h5>
        TestSetupItem
    </h5>
    <div>
        name: {{ name }}
        birth: {{ birth }}
        age: {{ age }}
    </div>
</template>

Script-Setup lang="tsx" 방식으로 구현하기

TBD