Vue 빌드할 때 필수 규칙들

Vue의 최근 변경사항들이 있습니다.

Vue는 작업하기 쉬운 프런트 엔드 프레임 워크입니다. 앱을 쉽게 만들 수 있습니다.

Vue 앱을 빌드 할 때 따라야 할 몇 가지 필수 규칙을 살펴 보겠습니다.

Computed Properties에 대한 async 함수 없음

Computed properties는 동기 함수여야만 합니다.

비동기 함수를 사용하면 예기치 않은 동작이 발생할 수 있습니다.

<template>
  <div id="app"></div>
</template>
<script>
export default {
  name: "App",
  computed: {
    reversedMsg() {
      return this.msg
        .split("")
        .reverse()
        .join("");
    }
  },
  data() {
    return { msg: "foo" };
  }
};
</script>

위와 같이 작성해야만 합니다.

필드 이름에 중복 키 없음

구성 요소 개체에 중복된 필드 이름이 없어야합니다.

이것은 전체 개체에 적용됩니다.

따라서 예를 들어 메서드나 데이터에서 동일한 이름을 사용해서는 안됩니다.

<template>
  <div id="app"></div>
</template>
<script>
export default {
  name: "App",
  computed: {
    foo() {
      return 'bar'
    }
  },
  data() {
    return { foo: "foo" };
  }
};
</script>

// 위와 같이 쓰지말고 아래와 같이 작성합니다.
<template>
  <div id="app"></div>
</template>
<script>
export default {
  name: "App",
  computed: {
    foo() {
      return "bar";
    }
  },
  data() {
    return { bar: "foo" };
  }
};
</script>

템플릿에 중복 속성이 없어야합니다.

<template>
  <div id="app">
    <div :id="id"></div>
    <div id="id"></div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      id: "id"
    };
  }
};
</script>

// 위와같이 작성하는 대신 아래와 같이 작성합니다.

<template>
  <div id="app">
    <div :id="id"></div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      id: "id"
    };
  }
};
</script>

예약어를 덮어쓰지 마세요.

예약된 키와 이름이 같은 키를 작성하면 안됩니다.

예를 들어 다음과 같이 작성해서는 안됩니다.

<template>
  <div id="app"></div>
</template>
<script>
export default {
  name: "App",
  props: {
    $el: String
  }
};
</script>

예약어인  $el prop이 있습니다.

잘못되었죠..

공유 구성 요소 상태 없음

data 속성은 값으로 객체 대신 함수를 가져야합니다. 

객체가 있으면 상태가 공유됩니다.

 

<template>
  <div id="app"></div>
</template>
<script>
export default {
  name: "App",
  data: {
    foo: "bar";
  }
};
</script>

// 위와 같이 작성하지말고 아래와 같이 작성합니다.

<template>
  <div id="app"></div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      foo: "bar"
    };
  }
};
</script>

Computed Properties에 사이드 이펙트 만들지 않기

<template>
  <div id="app"></div>
</template>
<script>
export default {
  name: "App",
  computed: {
    foo() {
      window.foo = `foo ${this.baz}`;
      return `foo ${this.baz}`;
    }
  },
  data() {
    return {
      baz: "bar"
    };
  }
};
</script>

// 위와 같이 작성하는 대신에 아래와 같이 작성합니다.

<template>
  <div id="app"></div>
</template>
<script>
export default {
  name: "App",
  computed: {
    foo() {
      return `foo ${this.baz}`;
    }
  },
  data() {
    return {
      baz: "bar"
    };
  }
};
</script>

템플릿에 키 속성 사용하지 않기

<template key='app'>
  <div id="app"></div>
</template>
<script>
export default {
  name: "App"
};
</script>

// 위와 같이 작성하는 대신 아래와 같이 작성합니다.

<template>
  <div id="app"></div>
</template>
<script>
export default {
  name: "App"
};
</script>

textarea 영역에 mustache 사용하지 않기

대신 v-model 지시문을 사용해야합니다. 

이렇게하면 모델 필드와 입력값 사이에 양방향 바인딩을 얻을 수 있습니다.

<template >
  <div id="app">
    <textarea>{{ message }}</textarea>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      message: "foo"
    };
  }
};
</script>

// 위와 같이 작성하는 대신 아래와 같이 작성합니다.

<template >
  <div id="app">
    <textarea v-model="message">{</textarea>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      message: "foo"
    };
  }
};
</script>

 

결론

Vue 앱을 작성할 때 실수를하는 방법에는 여러 가지가 있습니다.

우리는 Computed Properties 속성에 사이드 이펙트를 만들면 안됩니다. 또한, 우리 컴포넌트는 절대 상태를 외부에 노출해서는 안됩니다. 예약어는 구성 요소 객체의 키가 되어서는 안됩니다.

모델 필드와 입력 값 사이의 양방향 바인딩을 얻으려면 textarea 요소와 함께 v-model을 사용해야합니다.

 

 

출처 : medium.com/swlh/vue-best-practices-most-important-changes-b4ced988d659