Vue 프로젝트에서 내가 따르는 경향이 있는 몇 가지 간단한 패턴이 있는데 공유할 수 있을 만큼 충분히 효과적이라고 생각합니다. 이제 시작하겠습니다.

나는 다른 사람들이 이러한 경우에 대해 어떻게 하는지 정말 궁금하므로 공유해 주세요.

로드 상태

로드 상태가 변경될 때마다 토글하는 true/false 플래그의 간단한loading 개체를 사용합니다. 메시징, 로드 표시기 및 전체 콘텐츠 섹션은 이러한 플래그에 의해 구동됩니다.

해당 데이터의 유무를 사용할 수 있는 경우가 있지만 별도의 개체를 사용하면 모든 설계 요구 사항에 필요한 유연성을 제공합니다.

예:

<template>
  <div>
    <div v-if="loading.users">Loading users</div>
    <table v-if="!loading.users">
      ...
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      users: [],
      loading: {users: false}
    }
  },

  created() {
    this.loading.users = true;

    fetch('/users')
      .then(users => this.users = users)
      .catch(console.error)
      .finally(() => this.loading.users = false)
  }
}
</script>

오류 메시지

로드 상태와 마찬가지로 간단한errors 개체를 설정하고 플래그를 토글합니다. 하나의 오류가 때때로 여러 UI 비트를 트리거할 수 있기 때문에 오류 메시지가 오류 개체보다 템플릿에서 가장 잘 수행된다는 것을 알았습니다.

예:

<template>
  <div>
    <div v-if="errors.fetchUsers">Failed to load users.</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      users: [],
      errors: {fetchUsers: false}
    }
  },

  created() {
    fetch('/users')
      .then(users => this.users = users)
      .catch(err => {
        this.errors.fetchUsers = true;
        console.error(err);
      })
  }
}
</script>

때때로 구성 요소는 오류가 전혀 없는지 알아야 합니다. 다음 사항을 확인하는 것은 정말 쉽습니다.

// Basic programmatic check
const hasErrors = Object.values(this.errors).some(err => err)

// Or as a computed
computed: {
  hasErrors: function () {
    return Object.values(this.errors).some(err => err)
  }
}

이벤트 수정자 피하기

문서에서:

<form v-on:submit.prevent="onSubmit"></form>

그 .prevent는 이미 짧은 e.preventDefault()에 대한 지름길입니다. 앱 전체에 흩어져 있는 이와 같은 독점 마크업의 비용은 무시할 수 있는 편의성을 능가합니다.

Vue(및 Riot)의 강점은 단순성입니다. 따라서 더 쉽게 채택하고 교체할 수 있습니다. 프레임워크의 특수 소스를 너무 많이 사용하면 종속성이 증가합니다. 좋지 않습니다! 그리고 새 사용자가 코드를 이해하기 어렵게 만듭니다.

보다 평평한 구성 요소 계층

세 번째 레이어를 넘어 Vue 구성 요소를 중첩하는 것을 피합니다. 네 번째 계층은 Custom Elements으로 구현됩니다. 프레임워크별 기능이 필요하지 않을 때 항상 바닐라 js를 작성하는 것을 선호하기 때문입니다.

내 Vue(및 Riot) 프로젝트는 다음과 같습니다.

이것은 웹 표준임에도 불구하고 React가 Custom Elements와 약간의 어려움을 겪기 때문에 React로는 결코 달성할 수 없는 이상적인 디자인입니다.

공유 모듈

이것은 명백할 수 있지만 때때로 이러한 종류의 문제에 대해 지나치게 엔지니어링된 솔루션을 볼 수 있으므로 공유할 가치가 있다고 생각했습니다.

Vue 구성 요소나 사용자 지정 지시문 또는 기타 Vue 종속 솔루션을 만드는 대신 가능한 간단한 Vue가 없는 모듈을 사용하려고 노력합니다. 예를 들어, 여러 구성 요소에서 원시 바이트 수를 KB, MB, GB 등으로 형식화해야 합니다. 이 작업을 수행하는 함수를 내보내고 필요한 구성 요소에서 가져옵니다.

// data-utils.js
// No Vue allowed!

export function formatBytes(bytes = 0) {
  // Zero is a valid value
  if (bytes <= 0) return '0 bytes';

  // Handle non-zero falsy
  if (!bytes) return '';

  // Format value, e.g. "5 MB"
  const k = 1024;
  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB'];
  const size = Math.floor(Math.log(bytes) / Math.log(k));
  const num = parseFloat((bytes / Math.pow(k, size)).toFixed(2))
  return `${num} ${sizes[size]}`;
}

<template>
  <div>
    <p>File size is {{ formatBytes(file.size) }}</p>
  </div>
</template>
<script>
import {formatBytes} from '../data-utils';

export default {
  data() {
    return {
      file: new File()
    }
  },

  methods: {
    formatBytes
  }
}
</script>

나는 보통 이 중 12개 이상으로 끝나고 Vue 프로젝트를 위한 것이지만 Vue 자체에 대한 종속성이 없을 때 작성, 사용 및 테스트하기가 훨씬 쉽습니다. 때때로 이들은 Vue에서 분리되어 있기 때문에 다른 프로젝트에서 사용할 수 있는 공유 패키지로 전환됩니다.


그 외에 저는 Vue의 기본 기능을 있는 그대로 사용하고 있으며 그것만으로도 엄청나게 멀리 걸립니다. Vue를 다른 보다 야심적이고 독점적인 프레임워크보다 더 강력하게 만드는 것은 바로 이러한 단순함입니다. Vue는 내 경험에 비추어 볼 때 필요한 것보다 훨씬 더 많은 것을 제공하며 많은 경우에 그렇게 하지 않아도 됩니다.

기본 외에도 Vue에서 어떤 패턴을 사용하고 있습니까?