Vue 프론트엔드 개발 시 주의할 점은 무엇인가요?

이번에는 Vue 프론트엔드 개발 시 주의해야 할 사항을 알려드리겠습니다. Vue 프론트엔드 개발 시 주의사항은 무엇인지 살펴보겠습니다.

Vue 공식 스타일 가이드 기준

1. 필수

1 루트 구성 요소 앱을 제외하고 구성 요소 이름은 항상 여러 단어로 구성되어야 합니다. 긍정적 예:

export default {
 name: 'TodoItem',
 // ...
}
反例：
export default {
 name: 'Todo',
 // ...
}

2. 구성요소 데이터

구성요소의 데이터는 함수여야 합니다. 컴포넌트(new Vue를 제외한 모든 곳)에서 데이터 속성을 사용할 때 해당 값은 객체를 반환하는 함수여야 합니다.

긍정적 예:

// In a .vue file
export default {
 data () {
 return {
 foo: 'bar'
 }
 }
}
// 在一个 Vue 的根实例上直接使用对象是可以的，
// 因为只存在一个这样的实例。
new Vue({
 data: {
 foo: 'bar'
 }
})

카운터 예:

export default {
 data: {
 foo: 'bar'
 }
}

3. Prop 정의

Prop 정의는 최대한 자세해야 합니다.

제출한 코드에서 prop의 정의는 최소한 해당 유형을 지정하면서 최대한 자세해야 합니다.

긍정적 예:

props: {
 status: String
}
// 更好的做法！
props: {
 status: {
 type: String,
 required: true,
 validator: function (value) {
 return [
 'syncing',
 'synced',
 'version-conflict',
 'error'
 ].indexOf(value) !== -1
 }
 }
}

카운터 예:

// 这样做只有开发原型系统时可以接受
props: ['status']

4. v-for에 대한 키 값 설정

항상 v-for와 함께 키를 사용하세요.

내부 구성 요소와 해당 하위 트리의 상태를 유지하려면 구성 요소에서 항상 v-for와 함께 Key를 사용해야 합니다. 애니메이션의 개체 일관성과 같은 요소에 대한 예측 가능한 동작을 유지하는 것도 좋은 방법입니다.

긍정적 예:

<ul>
 <li
 v-for="todo in todos"
 :key="todo.id"
 >
 {{ todo.text }}
 </li>
</ul>

카운터 예:

<ul>
 <li v-for="todo in todos">
 {{ todo.text }}
 </li>
</ul>

5. v-if와 v-for를 함께 사용하지 마세요.

동일한 요소에 v-if와 v-for를 동시에 사용하지 마세요.

일반적으로 우리는 두 가지 일반적인 상황에서 이 작업을 수행하는 경향이 있습니다:

목록의 항목을 필터링하려면(예: v-for="user in users" v-if="user.isActive") . 이 경우 사용자를 필터링된 목록을 반환하는 계산된 속성(예: activeUsers)으로 바꿉니다.

숨겨야 하는 목록(예: v-for="user in users" v-if="shouldShowUsers") 렌더링을 방지합니다. 이 경우 v-if를 컨테이너 요소(예: ul, ol)로 이동하세요.

긍정적인 예: v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers

<ul v-if="shouldShowUsers">
 <li
 v-for="user in users"
 :key="user.id"
 >
 {{ user.name }}
 </li>
</ul>

카운터 예:

<ul>
 <li
 v-for="user in users"
 v-if="shouldShowUsers"
 :key="user.id"
 >
 {{ user.name }}
 </li>
</ul>

6. 구성 요소 스타일의 범위 설정

애플리케이션의 경우 최상위 앱 구성 요소 및 레이아웃 구성 요소의 스타일은 전역적일 수 있지만 다른 모든 구성 요소에는 범위가 있어야 합니다.

이 규칙은 단일 파일 구성 요소에만 적용됩니다. 범위가 지정된 속성을 사용할 필요는 없습니다. 범위 설정은 BEM과 유사한 클래스 기반 전략인 CSS 모듈을 통해 수행할 수도 있습니다. 물론 다른 라이브러리나 규칙을 사용할 수도 있습니다.

어쨌든 구성 요소 라이브러리의 경우 범위가 지정된 기능 대신 클래스 기반 전략을 사용하는 것을 선호해야 합니다.

이렇게 하면 내부 스타일을 더 쉽게 재정의할 수 있습니다. 높은 선택기 우선 순위 없이 사람이 읽을 수 있는 클래스 이름을 사용하고 충돌을 일으킬 가능성이 줄어듭니다.

긍정적 예시:

<template>
 <button class="c-Button c-Button--close">X</button>
</template>
<!-- 使用 BEM 约定 -->
<style>
.c-Button {
 border: none;
 border-radius: 2px;
}
.c-Button--close {
 background-color: red;
}
</style>

카운터 예시:

<template>
 <button class="btn btn-close">X</button>
</template>
<style>
.btn-close {
 background-color: red;
}
</style>
<template>
 <button class="button button-close">X</button>
</template>
<!-- 使用 `scoped` 特性 -->
<style scoped>
.button {
 border: none;
 border-radius: 2px;
}
.button-close {
 background-color: red;
}
</style>

2. 적극 권장(가독성 향상)

1. 컴포넌트 파일

파일을 스플라이싱할 수 있는 빌드 시스템이 있는 한, 각 컴포넌트를 분리하세요. 파일로.

컴포넌트를 편집해야 하거나 컴포넌트의 사용량을 확인해야 할 때 더 빠르게 찾을 수 있습니다.

긍정적인 예:

components/
|- TodoList.vue
|- TodoItem.vue

카운터 예:

V
ue.component('TodoList', {
 // ...
})
Vue.component('TodoItem', {
 // ...
})

2. 단일 파일 구성 요소 파일의 경우

단일 파일 구성 요소의 파일 이름은 항상 대문자로 시작해야 합니다(PascalCase)

긍정적인 예:

components/
|- MyComponent.vue

카운터 예:

components/
|- myComponent.vue
|- mycomponent.vue

3. 기본 구성 요소 이름

특정 스타일과 규칙을 적용하는 기본 구성 요소(즉, 표현형, 비논리적 또는 상태 비저장 구성 요소)는 모두 Base, App 또는 다섯.

긍정적인 예:

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

카운터 예:

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

4. 싱글톤 구성 요소 이름

단일 활성 인스턴스만 있어야 하는 구성 요소에는 고유성을 표시하기 위해 접두사 The를 붙여 이름을 지정해야 합니다.

这不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用定制的，而不是它们在你的应用中的上下文。如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，只是目前在每个页面里只使用一次。

正例：

components/
|- TheHeading.vue
|- TheSidebar.vue

反例：

components/
|- Heading.vue
|- MySidebar.vue

5. 紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。

正例：

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

反例：

components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue

6. 组件名中的单词顺序

组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。

正例：

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

反例：

components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

7. 模板中的组件名大小写

总是 PascalCase 的

正例：

<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>

反例：

<!-- 在单文件组件和字符串模板中 -->
<mycomponent/>
<!-- 在单文件组件和字符串模板中 -->
<myComponent/>

8. 完整单词的组件名

组件名应该倾向于完整单词而不是缩写。

正例：

components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

反例：

components/
|- SdSettings.vue
|- UProfOpts.vue

9. 多个特性的元素

多个特性的元素应该分多行撰写，每个特性一行。

正例：

<img
 src="https://vuejs.org/images/logo.png"
 alt="Vue Logo"
>
<MyComponent
 foo="a"
 bar="b"
 baz="c"
/>

反例：

<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<MyComponent foo="a" bar="b" baz="c"/>

10. 模板中简单的表达式

组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。

正例：

<!-- 在模板中 -->
{{ normalizedFullName }}
// 复杂表达式已经移入一个计算属性
computed: {
 normalizedFullName: function () {
 return this.fullName.split(' ').map(function (word) {
 return word[0].toUpperCase() + word.slice(1)
 }).join(' ')
 }
}

反例：

{{
 fullName.split(' ').map(function (word) {
 return word[0].toUpperCase() + word.slice(1)
 }).join(' ')
}}

11. 简单的计算属性

正例：

computed: {
 basePrice: function () {
 return this.manufactureCost / (1 - this.profitMargin)
 },
 discount: function () {
 return this.basePrice * (this.discountPercent || 0)
 },
 finalPrice: function () {
 return this.basePrice - this.discount
 }
}

反例：

computed: {
 price: function () {
 var basePrice = this.manufactureCost / (1 - this.profitMargin)
 return (
 basePrice -
 basePrice * (this.discountPercent || 0)
 )
 }
}

12. 带引号的特性值

非空 HTML 特性值应该始终带引号 (单引号或双引号，选你 JS 里不用的那个)。
在 HTML 中不带空格的特性值是可以没有引号的，但这样做常常导致带空格的特征值被回避，导致其可读性变差。

正例：

<AppSidebar :style="{ width: sidebarWidth + &#39;px&#39; }">

反例：

<AppSidebar :style={width:sidebarWidth+&#39;px&#39;}>

13. 指令缩写

都用指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:)

正例：

<input
 @input="onInput"
 @focus="onFocus"
>

反例：

<input
 v-bind:value="newTodoText"
 :placeholder="newTodoInstructions"
>

三、推荐

1. 单文件组件的顶级元素的顺序

单文件组件应该总是让