배운 것을 정리합니다.

[Vue 00] vue 기초

예

예준천

카테고리

반응형

reactive

import { reactive } from 'vue'

const state = reactive({ count: 0 })

다음과 같이 반응형 변수를 사용할 수 있음

업데이트타이밍

반응형이 작동하기 위해서는 DOM 자동 업데이트 시간을 기다려야함. 이때 동기적으로 적용되지 않기 때문에 만약 어떤 상태변경이 완료 된후 특정작업을 하고 싶다면 nextTick()을 사용하면 됨

import { nextTick } from 'vue'

function increment() {
  state.count++
  nextTick(() => {
    // 업데이트된 DOM에 접근 가능
  })
    //이후에 오는 작업들은 업데이트 완료된 이후인가?
}

깊은 반응형

기본적으로 reactive는 깊은 반응형으로 중첩된 객체나 배열의 요소를 변경할 때도 변경이 감지됨 .

언제끊어지나

반응형 객체의 속성을 로컬변수에 할당하거나 분해하면 반응형 연결이 끊어짐

const state = reactive({ count: 0 })

// n은 state.count에서 연결이 끊긴 로컬 변수입니다.
let n = state.count

ref

.value에 값을 넣어 ref객체에 래핑 후에 반환한다.

const count = ref(0)
// const count  = reactive({value: 0})
console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

값으로 객체를 가지는 경우 객체 전체를 반응형으로 대체할 수 있다.


let state = reactive({ count: 0 })

// 위에서 참조한 ({ count: 0 })는 더 이상 추적되지 않습니다. (반응형 연결이 끊어졌습니다.)
state = reactive({ count: 1 })

const objectRef = ref({ count: 0 })

// 이것은 반응형으로 작동합니다
objectRef.value = { count: 1 }

state는 새로운 프록시를 반환하지만 ref는 value의 값을 수정함. 이때 value는 반응형으로 추적되고 있기 때문에 반응형으로 작동함.

ref의 언래핑

최상위 속성의 ref를 템플릿에서 접근시 자동으로 언래핑됨

ref가 다른 반응형객체의 속성으로 들어가면 접근이나 변경시 자동 언래핑됨

단, 배열이나 기본 컬렉션 유형의 속성으로 들어간다면 .value가 필요함

computed

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

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 계산된 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>책을 가지고 있다:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

computed()함수의 매개변수 : getter로 사용될 함수 / return값 : computed ref

이때 의존하고 있는 변수들의 변경을 감지하고 있다가 변경이 감지되면 computed값을 다시 계산한다.

클래스 & 스타일 바인딩

클래스 토글

<div :class="{ active: isActive }"></div>

컴포넌트

<!-- 컴포넌트가 사용될 때 -->
<MyComponent class="baz boo" />

렌더링결과

<p class="foo bar baz boo">안녕!</p>

스타일 바인딩

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

그냥 쓰면 됨

조건부

v-if

v-else와 같이사용됨

v-show

DOM에서 렌더링은 되지만 CSS display 속성을 안보이게 바꿈

watch

watch(감시될 소스 , 콜백 함수, 추가 옵션들)

콜백함수는 주로 변경된 값과 이전값을 인자로 받는것이 권장되지만 없어도 됨!!

watch(
      value,
      (newValue, oldValue) => {
        console.log('value changed:', newValue, oldValue);
      },
      { deep: true }
 );

Subscribe to 'Yejun Cheon'

Subscribe to my site to be the first to receive notifications and emails about the latest updates, including new posts.
Join Slashpage and subscribe to 'Yejun Cheon'!