Vue Cheat Sheet (업무하다 얻게된 지식들)

1. ref, shallowRef

  • Vue에서 반응형 데이터를 관리하는 방법이지만, 두 가지 차이가 있음
    1. ref: 객체의 모든 속성을 깊이 반응형으로 만들어 트래킹함. 즉, 객체 내부의 모든 변경 사항을 감지함.
    2. shallowRef: 객체의 최상위 수준만 반응형으로 만듦. 즉, 객체의 내부 속성은 반응형이 아니며, 최상위 값이 변경될 때만 반응함.

shallowRef는 성능을 개선하고 컴포넌트를 불필요하게 반응형으로 만드는 것을 피하는 데 유용함

2. MutationObserver로 vue v-model 감시하기

  • v-model로 양방향 바인딩으로 업데이트 되는 데이터는 감시 못함
  • input type=text :value="" @input="" 이런식으로 작성해야 감시 가능

3. vue3 Suspense

  • 자식 컴포넌트 코드에 top-level await가 있어야함
<template>
  <Suspense>
    <CustomComponent />
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

4. vue3 Suspense Error Handling

<script setup lang="ts">
  // ...
  const error = ref(null);
  onErrorCaptured((e: Error) => (error.value = e));
  // ...
</script>

<template>
  <div class="space-up error" v-if="error">
    {{ error }}
  </div>
  <Suspense v-else>
    <CustomComponent />
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

4. vue-router 3, 4 버전 차이

  • router 이동시 params로 전달한 값은 이동된 페이지에서 props로 사용할 수 없음

    • vue-router 4버전대에선 props로 전달 안됨. 3버전까진 됨.

  • 라우터 이동할 때 렌더링되는 컴포넌트에 props 전달 방법

    • vue2, vue-router3 버전일 땐, router.push({ prams: { ... } }) 방식으로 전달

    • 라우터 설정쪽에선 props: true로 설정

    • 하지만 vue3, vue-router4 버전에선 라우터 설정에 패스파라미터가 정의가 안되어있으면 props로 전달이 안됨

    • vue3, vue-router4에선 history.state로 전달해야됨

      // vue3, vue-router4 라우터 이동시 아래와 같이 props 전달
await router.push({
  name: 'xxx',
  state: {
      props: {
          // ...
      }
  }
})

// 라우터 설정파일
const modalProps = () => ({
  ...cloneDeep(window.history.state.props),
});

const modals = [
  {
    path: '...',
    name: '...',
    component: '...',
    props: modalProps,
  }
]

5. vue-router 4 navigation guards

const router = createRouter({ ... })

router.beforeEach((to, from) => {
  // ...
  // 탐색을 취소하려면 명시적으로 false를 반환합니다.
  return false
})

  • https://router.vuejs.org/guide/advanced/navigation-guards.html#Optional-third-argument-next

  • 선택적인 세 번째 인수 next

    • 이전 버전의 Vue Router에서는 세 번째 인수 next를 사용할 수도 있었습니다.
    • 이는 일반적인 실수의 원천이었으며 RFC를 거쳐 제거되었습니다.
    • 그러나 여전히 지원되므로 모든 탐색 가드에 세 번째 인수를 전달할 수 있습니다.
    • 이 경우 탐색 가드를 통과하는 모든 패스에서 next를 정확히 한 번만 호출해야 합니다.
    • 두 번 이상 나타날 수 있지만 논리적 경로에 겹치지 않는 경우에만 해당합니다.
    • 그렇지 않으면 후크가 해결되지 않거나 오류가 발생합니다.
    • 다음은 인증되지 않은 경우 사용자를 /login으로 리디렉션하는 나쁜 예입니다.
// BAD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  // if the user is not authenticated, `next` is called twice
  next()
})
// GOOD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})
  • vue-router 4에선 next를 안써도 됨 / 네비게이션 가드 알아서 통과함