[Vue3 + typescript] Options, Composition, Setup 비교

VUE.JS 목록

Option 방식

<template>
  <div>
    <h1>Test Option</h1>
    <input v-model="name" type="text" />
    <input v-model="age" type="number" />
    <button @click="increase">증가</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "TestOption",
  components: {},
  data() {
    return {
      name: "Google",
      age: 11,
    };
  },

  methods: {
    increase() {
      this.age += 1;
    },
  },
});
</script>

 

 

Composition 방식

<template>
  <div>
    <h1>Test Composition</h1>
    <input v-model="name" type="text" />
    <input v-model="age" type="number" />
    <button @click="increase">증가</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "TestComponent",
  components: {},
  data() {
    const name = ref("Google");
    const age = ref(11);
    
    const increase = () => {
      age.value += 1;
    };
    
    return {
      name,
      age,
      increase,
    };
  },
});
</script>

 

 

 

 

script-setup 방식

<script setup lang="ts">
import { ref } from "vue";

const name = ref("Google");
const age = ref(11);

const increase = () => {
  age.value += 1;
};
</script>

<template>
  <div>
    <h1>Test Setup</h1>
    <input v-model="name" type="text" />
    <input v-model="age" type="number" />
    <button @click="increase">증가</button>
  </div>
</template>

 

 

 

 

 

 

 

 

 

 

 

 

Child 콤포넌트

Option 방식

TestOption.vue

<template>
  <div>
    <h1>Test Option</h1>
    <input v-model="name" type="text" />
    <input v-model="age" type="number" />
    <button @click="increase">증가</button>
    <TestOptionItem :name="name" :age="age" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import TestOptionItem from "./TestOptionItem.vue";

export default defineComponent({
  name: "TestOption",
  components: { TestOptionItem },
  data() {
    return {
      name: "Google",
      age: 11,
    };
  },

  methods: {
    increase() {
      this.age += 1;
    },
  },
});
</script>

TestOptionItem.vue

<template>
  <h3>Test Option Item</h3>
  <p>name: {{ name }}</p>
  <p>age: {{ age }}</p>
  <p>birth: {{ birth }}</p>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "TestOptionItem",

  props: {
    name: {
      type: String,
      required: true,
    },
    age: {
      type: Number,
      required: true,
    },
  },

  computed: {
    birth() {
      return 2022 - this.age;
    },
  },
});
</script>

 

 

 

 

 

Composition 방식

TestComposition.vue

<template>
  <div>
    <h1>Test Composition</h1>
    <input v-model="name" type="text" />
    <input v-model="age" type="number" />
    <button @click="increase">증가</button>
    <TestCompositionItem :name="name" :age="age" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import TestCompositionItem from "./TestCompositionItem.vue";

export default defineComponent({
  name: "TestComponent",
  components: { TestCompositionItem },
  data() {
    const name = ref("Google");
    const age = ref(11);

    const increase = () => {
      age.value += 1;
    };

    return {
      name,
      age,
      increase,
    };
  },
});
</script>

TestCompositionItem.vue

<template>
  <h3>Test Composition Item</h3>
  <p>name: {{ name }}</p>
  <p>age: {{ age }}</p>
  <p>birth: {{ birth }}</p>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";

export default defineComponent({
  name: "TestCompositionItem",

  props: {
    name: {
      type: String,
      required: true,
    },
    age: {
      type: Number,
      required: true,
    },
  },

  setup(props) {
    const birth = computed(() => 2022 - props.age);
    return { birth };
  },
});
</script>

 

 

 

 

 

 

Setup 방식

TestSetup.vue

<script setup lang="ts">
import { ref } from "vue";
import TestSetupItem from "./TestSetupItem.vue";

const name = ref("Google");
const age = ref(11);

const increase = () => {
  age.value += 1;
};
</script>

<template>
  <div>
    <h1>Test Setup</h1>
    <input v-model="name" type="text" />
    <input v-model="age" type="number" />
    <button @click="increase">증가</button>
    <TestSetupItem :name="name" :age="age" />
  </div>
</template>

TestSetupItem.vue

<script setup lang="ts">
import { defineProps, computed } from "vue";
const props = defineProps<{ name: string; age: number }>();
const birth = computed(() => {
  return 2022 - props.age;
});
</script>

<template>
  <h3>Test Setup Item</h3>
  <p>name: {{ name }}</p>
  <p>age: {{ age }}</p>
  <p>birth: {{ birth }}</p>
</template>

 

 

 

 

 

 

https://vuejs.org/api/sfc-script-setup.html#typescript-only-features

 

 

 

VUE.JS 목록