[Vue] Composition API 방식

바뀐 부분

상태값  = data() {}   →   ref(초기 상태값)  // 상태값 가져오려면 .value로 가져와야함

함수 = methods   →   그냥 선언

마운트 시 = mounted() {}    →  onMounted(() => {});

<script setup lang="ts">
import { ref, onMounted } from "vue";

let count = ref(0); // 상태변수 초기값(state)
let title = "Hello Vue";

onMounted(() => {
  console.log("mounted");
});

const increaseCount = () => {
  count.value++;	// 상태값 가져오려면 .value로 가져와야함
};
</script>

컴포넌트 import

그냥 스크립트에 import

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import ChildComp from "./components/ChildComp.vue";
...
</script>

Props

const props = defineProps({});로 props 정의

<ChildComp :color="color" bgColor="yellow" />

//

<template>
  <div>
    <h2 style="title">Child Component</h2>
    <p
      :style="{
        color,
        backgroundColor: bgColor,
      }"
    >
      {{ color }}
    </p>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  color: String,
  bgColor: String,
});
console.log(props.color);
</script>

<style scoped></style>

const emits = defineEmits(["onSearchCity"]);

@click="emits('onSearchCity', inputText)"

상위 컴포넌트로 onSearchCity라는 이벤트 전달, inputText는 전달된 값 

        <button @click="emits('onSearchCity', inputText)">
          <font-awesome-icon class="icon" :icon="['fas', 'magnifying-glass']" />
        </button>

...

<script setup lang="ts">
import { ref } from "vue";

const inputText = ref("");
const emits = defineEmits(["onSearchCity"]);
</script>

 

watch =

검사할 변수명(변경값, 이전값) {

  로직

}

→

watch(검사할 변수명, () => {
로직
});

 

양방향 바인딩

v-model과 defineModel을 사용해 보일러플레이트를 개선할 수 있음

<script setup>
import { ref } from 'vue';
import Comp from './Comp.vue';

let title = ref('title')
</script>

<template>
  <h1>{{ title }}</h1>
  <Comp v-model="title" />
</template>

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

  const model = defineModel();
</script>

<template>
  <h2>{{ model }}</h2>
  <p>inputText: {{ model}}</p>
  <input 
    type="text" 
    v-model="model"
  />
</template>

Ref와 Reactive의 차이점

- ref -

원시/객체 타입

.value로 꺼낼 수 있음 (html에서 {{}}로 불러올 땐 .value 생략 가능)

- reactive -

객체 타입

.으로 바로 속성 접근 가능

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

  const count = ref(0);
  const str = ref('hello');
  const obj = ref({name: "kwon"});
  const reactive_obj = reactive({name: "kwon"});

  console.log('ref_obj', obj.value.name);
  console.log(reactive_obj.name);
</script>

<template>
  <h1>Ref & Reactive</h1>
  <p>{{ count }}</p>
  <p>{{ str }}</p>
  <p>obj(ref): {{ obj.name }}</p>
  <p>reactive_obj: {{ reactive_obj.name }}</p>
</template>