[Vue3] 반응성

ref

<template>
  <h3>잔액 = {{ money }} </h3>
  <input v-model="money">
  <button @click="reset"> RESET </button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const money = ref("");
    
   	const reset = () => {
      money.value = 10000;
    }
    
    return {
      money,
    }
  }
}

원시 타입을 반응형으로 사용할 때 사용한다.
script안에서 해당 값에 접근할 때는 .value를 통해서 접근해야 접근이 가능하다. 만약 그냥 접근하게 된다면 해당 값은 undifined로 반환되어 원하는 결과를 얻을 수 없다.

reactive

<template>
  <h3>잔액 = {{ money }} </h3>
  <input v-model="money">
  <button @click="reset"> RESET </button>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      money : '',
    });
    
   	const reset = () => {
      state.money = 10000;
    }
    
    return {
      ...toRefs(state),
    }
  }
}

원시타입으로 적용이 안되고 Object,array,Map,Set 등의 타입에서만 사용할 수 있다.
ref와는 다르게 .value로 접근할 필요가 없다.

toRef

<template>
  <h1>msg = {{ msg }}</h1>
  <input v-model="msg">
</template>

<script>
import { reactive, toRef } from 'vue'

export default {
  setup() {
  const words = reactive({a:"a",b:"b"});
  const msg = words.a;
  },
  
  return {
    msg,
  }
}
</script>

위와 같이 작성 했을 때, 자바스크립트는 word.a의 value값만 복사하기 때문에 Proxy의 반응성을 유지하지 못한다.
words의 a가 string이기 때문에 복사를 하면 value값만 복사해 반응성을 잃어버려서 반영되지 않는 모습입니다.

<template>
  <h1>msg = {{ msg }}</h1>
  <input v-model="msg">
</template>

<script>
import { reactive, toRef } from 'vue'
export default {
  setup() {
    const words = reactive({a:"a",b:"b"})
    const msg = toRef(words, 'a')
    },
  return {
  	msg,
  }
}
</script>

toRef는 하나의 property에 대해 부모 object와의 연결성을 유지한채로 reactive를 반환하고 이 변화는 부모에게도 반영이 되어 추적이 된다.

toRefs

<template>
  <h1>msg = {{ a }}</h1>
  <input v-model="a">
</template>

<script>
import { reactive, toRef } from 'vue'
export default {
  setup() {
    const words = reactive({a:"a",b:"b"})
    },
  return {
  	...toRefs(words),
  }
}
</script>

toRefs는 reactive의 모든 프로퍼티에 대해 toRef를 적용해 반환한다.

정하기 나름이지만 보통 ref선언해줘야 할 것이 4개가 넘어가는 경우 reactive 사용함