[vue3] ref, reactive

template에 변화를 적용하기 위함.

 

String, int 와 같은 일반 자료형은 ref 를 사용해도 되지만, 

object, array 등은 reactive 를 사용

 

import { ref } from 'vue';
import { reactive } from 'vue';

 

- ref 를 사용할 때 ref로 정의한 값을 .value로 가져온다. 

 

ex)

import {ref} from 'vue';

export default {
setup() {
  const name = ref('limi');

  const updateName = () =>{
    name.value = 'limilmi2';
    console.log(name);
  }

  return {
    name,
    updateName,
  };
}

 

 

- reactive는 value가 아니라 id 값으로 바로 접근이 가능하다.

- object 를 ref로 사용하려면 name.value.id로 접근한다.

 

ex)

import {reactive} from 'vue';

export default {
setup() {
  const name = reactive({
    id : 1
  });

  const updateName = () =>{
    name.id = 2;
    console.log(name);
  }

  return {
    name,
    updateName,
  };