[Vue 3] Composition API - ref, reactive

      export default {
	data() {
		// 컴포넌트 데이터들을 모아놓는 곳
	},
	methods: {
		// 컴포넌트 함수들을 모아 놓은 곳
	},
	mounted() {
		// 컴포넌트가 마운트되었을 때 실행되는 곳
	}
}
    

      export default {
  setup() {
		// ...
  }
}
    

      <template>
  <p>{{ count }}</p>
  <button @click="increase">Increase</button>
</template>

<script>
export default {
  setup() {
		let count = 0;
		function increase() {
			count += 1;
		}
		// 반환해서 template에서 사용합니다.
		return {
			count,
			increase
		}
  }
}
</script>
    

      import { reactive, ref } from "vue";

export default {
  setup() {
    // reactive
    const obj = reactive({ count: 0 });
    const array = reactive([1, 2, 3]);

    // ref
    const count = ref(0);
    const bool = ref(true);
    const str = ref("Hello World");
    const obj2 = ref({ count: 0 });
    const array2 = ref([1, 2, 3]);
  },
};
    

      import { reactive } from 'vue'

const obj = reactive({
  nested: { count: 0 },
  arr: ['foo', 'bar']
})

function mutateDeeply() {
	// 중첩된 값에도 반응하여 DOM을 다시 렌더링합니다.
  obj.nested.count++
  obj.arr.push('baz')
}
    

      import { reactive } from "vue";

export default {
  setup() {
		// 객체 값 변경하기
    const obj = reactive({ count: 0 });
		obj.count += 1;
		
		// 배열 값 변경하기
		const arr = reactive([1,2,3]);
		arr.push(4);
	}
}
    

      import { ref } from "vue";

export default {
  setup() {
		// 객체 값 변경하기
    const obj = ref({ count: 0 });
		obj.value.count += 1;
		
		// 배열 값 변경하기
		const arr = ref([1,2,3]);
		arr.value.push(4);
	}
}
    

      // ❌  원시 타입은 반응형 상태로 만들 수 없음
let bool = reactive(true);
let num = reactive(3);
let str = reactive('Hello');

// ✅  개체 타입은 반응형 상태로 만들 수 있음
let obj = reactive({ count: 0 });
let arr = reactive([1, 2, 3, 4]);
    

      let state = reactive({ count: 0 });

// 참조하고 있던 state에 새로 할당해서
// 반응형 연결이 끊긴다.
state = reactive({ count: 1 });

// 객체 내부에 접근하는 다음과 같은 경우 연결이 끊김

// 1. local 변수에 넣기
let n = state.count;

// 2. 구조 분해 할당 (destructuring assignment)
let { count } = state;

// 3. 함수에 넣기
someFunction(state.count);
    

      import { ref } from 'vue';

// 원시 타입도 반응형으로 만들기 가능
const count = ref(0);

// state에 대한 참조 자체는 끊기지 않기 때문에
// value 값 자체를 바꿔도 반응형이 유지된다.
let state = ref({ count: 0 });
state.value = { count: 1 };
    

      let state = reactive({
	value: { count: 0 }
});
    

      // 원시 타입에도 반응형을 만들 수 있기 때문에
// 하위 속성을 접근할 때 다음 방법으로 반응형을 유지한다.
const obj = {
	count: ref(1),
};

// 1. local 변수에 넣기
let n = obj.count;

// 2. 구조 분해 할당 (destructuring assignment)
let { count } = obj;

// 3. 함수에 넣기
someFunction(obj.count);
    

      <template>
  <!-- .value를 쓰지 않아도 됩니다. -->
  <p>{{ message }}</p>

  <!-- .value를 써야합니다. -->
  <p>{{ obj.count.value }}</p>
</template>

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

export default {
  setup() {
    const message = ref("hello");
    const obj = {
      count: ref(1),
    };
    return {
      message,
      obj,
    };
  },
};
</script>
    

      <template>
  <p>{{ count }}</p>
</template>

<script>
export default {
	setup() {
	  const obj = {
	    count: ref(1),
	  };
		const { count } = obj;
		
		// ...
		return {
			count,
		};
	}
};
</script>
    

      <script>
export default {
	setup() {
		let count = $ref(0)
		
		function increment() {
		  // 컴파일 시 자동으로 .value를 추가해서 계산합니다.
		  count++
		}
	}
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>
    

      <script setup>
import { reactive, ref } from 'vue'

// state, obj 모두 template에서 사용 가능
const state = reactive({ count: 0 })
const obj = ref({ count: 0 })
</script>