[vue3] ref, reactive 사용법

● ref 사용법

setup () {
    const name = ref('Kossie Coder1');
    const updateName = () => {
      name.value = 'Kossie Coder2';
    }
    return {
      name,
      updateName
    }
  }

- 탬플릿으로 되어 있어 ref 를 사용하여 값을 변경해야한다.

- ref 를 사용할땐 value 를 사용해야한다.

 

● reactive 사용법 (주로, [], {} 일때 사용된다)

<template>
    <div class="name">{{name}}</div>
    <div>{{array.id}}</div>
    <b-button 
      v-on:click="updateName" 
      variant="primary">
    Click
    </b-button>
</template>

<script> 
import { ref, reactive } from 'vue'
export default {
  setup () {
    const name = ref('Kossie Coder1');
    const array = reactive({
      id: 1
    });

    const updateName = () => {
      name.value = 'Kossie Coder2';
      array.id = 2;
    }
    return {
      name,
      array,
      updateName
    }
  }
}
</script> 

<style> 
.name {
  font-size: 20px;
  color: red;
}
</style>