[Vue3 + typescript] reactive, ref, toRefs 반응성 주입

VUE.JS 목록

 

<template>
  <div>
    <h1>Test Reactive</h1>
    <h2>{{ username }}</h2>
    <input v-model="username" type="text" />
    <button @click="changeName">이름 변경</button>

    <hr />
    <p>제품명: {{ item }}, 가격: {{ price }}</p>
    <button @click="changeProduct">제품 변경</button>
  </div>
</template>

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

export default defineComponent({
  name: "TestReative",
  setup() {
    // ref
    const username = ref("romeoh");
    const changeName = () => {
      username.value = "trumph";
    };

    // reactive
    const state = reactive({
      item: "TV",
      price: 100,
    });
    const changeProduct = () => {
      (state.item = "Radio"), (state.price = 200);
    };

    return {
      username,
      changeName,
      ...toRefs(state),
      changeProduct,
    };
  },
});
</script>

 

 

 

 

 

VUE.JS 목록