So implementieren Sie einen optimierten Stil in Vue (ausführliches Tutorial)

In diesem Artikel werden die relevanten Wissenspunkte des optimierten Vue-Stils erläutert und der Beispielcode weitergegeben. Interessierte Freunde können darauf verweisen.

Wie bereits erwähnt

Der Styleguide auf der offiziellen Vue-Website ist nach Priorität klassifiziert (in der Reihenfolge „notwendig“, „dringend empfohlen“, „empfohlen“ und „mit Vorsicht verwendet“), und die Codeintervalle sind groß und schwer abzufragen. Dieser Artikel ist nach Typ klassifiziert und enthält einige Beispiele oder Erklärungen. Es handelt sich um eine optimierte Version des Vue-Styleguides

Komponentenname

[Komponentenname besteht aus mehreren Wörtern] (erforderlich)

Komponentennamen sollten immer aus mehreren Wörtern bestehen, mit Ausnahme der Stammkomponente App. Dadurch werden Konflikte mit bestehenden und zukünftigen HTML-Elementen vermieden, da alle HTML-Elementnamen aus einem Wort bestehen verbunden mit einer horizontalen Linie (Kebab-Fall)] (dringend empfohlen)

//bad
Vue.component('todo', {})
//good
Vue.component('todo-item', {})

[Grundkomponentennamen müssen mit einem bestimmten Präfix beginnen] (dringend empfohlen)

Bestimmte Stile und Konventionen anwenden Basiskomponenten (d. h. Präsentations-, nicht-logische oder zustandslose Komponenten) sollten alle mit einem bestimmten Präfix beginnen, z. B. Base, App oder V

//bad
mycomponent.vue
//good
MyComponent.vue
//good
my-component.vue

[Komponenten, die nur eine einzige aktive Instanz haben sollten, sollten sie benennen mit dem Präfix

, um seine Einzigartigkeit anzuzeigen] (dringend empfohlen)

TheDies bedeutet nicht, dass die Komponente nur auf einer einzelnen Seite verwendet werden kann, sondern dass

jede Seite

nur verwendet werden kann einmal, Diese Komponenten akzeptieren niemals irgendwelche Requisiten

//bad
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
//good
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

[Unterkomponenten, die eng mit der übergeordneten Komponente verbunden sind, sollten mit dem Namen der übergeordneten Komponente als Präfix benannt werden] (dringend empfohlen)

//bad
components/
|- Heading.vue
|- MySidebar.vue
//good
components/
|- TheHeading.vue
|- TheSidebar.vue

[Die Dem Komponentennamen sollte der Name der übergeordneten Komponente vorangestellt werden] (normalerweise allgemein beschrieben), beginnend mit einem Wort und endend mit einem beschreibenden Modifikator] (dringend empfohlen)

//bad
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
//good
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

[Komponentennamen in Einzeldateikomponenten und Zeichenfolgenvorlagen sollten immer PascalCase sein – aber in DOM-Vorlagen immer Kebab-Groß-/Kleinschreibung] (dringend empfohlen)

//bad
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
//good
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

[Komponentennamen sollten eher vollständige Wörter als Abkürzungen sein] (dringend empfohlen)

//bad
<!-- 在单文件组件和字符串模板中 -->
<mycomponent/>
<myComponent/>
<!-- 在 DOM 模板中 -->
<MyComponent></MyComponent>
//good
<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

Komponentenbezogen

[Einzelne Dateikomponenten, String-Vorlagen und Komponenten ohne Inhalt in JSX sollten selbstschließend sein – tun Sie dies jedoch nicht in DOM-Vorlagen] (dringend empfohlen)

Selbst -Schließende Komponenten bedeuten, dass sie nicht nur keinen Inhalt haben, sondern auch absichtlich keinen Inhalt

//bad
components/
|- SdSettings.vue
|- UProfOpts.vue
//good
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

[Bereich für Komponentenstile festlegen] (erforderlich)

Diese Regel ist nur für Einzeldateikomponenten relevant.

Es ist nicht notwendig,

die Funktion zu verwenden. Der Bereich kann auch über CSS-Module oder mithilfe anderer Bibliotheken oder Konventionen festgelegt werden.

//bad
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent></MyComponent>
<!-- 在 DOM 模板中 -->
<my-component/>
//good
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

scoped [Einzeldateikomponenten sollten die Reihenfolge der Tags 3f1c4e4b6b16bbbd69b2ee476dc4f83a, d477f9ce7bf77f53fbcf36bec1b69b7a) immer beibehalten.] (Empfohlen)

//bad
<template><button class="btn btn-close">X</button></template>
<style>
.btn-close {background-color: red;}
</style>
//good
<template><button class="btn btn-close">X</button></template>
<style scoped>
.btn-close {background-color: red;}
</style>
//good
<template><button :class="[$style.button, $style.buttonClose]">X</button></template>
<style module>
.btn-close {background-color: red;}
</style>

[Nur eine Komponente in einer Datei] (Dringend empfohlen)

//good
<!-- ComponentA.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

<!-- ComponentB.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

[Standardreihenfolge der Komponentenoptionen] (Empfohlen)

1. Einfluss außerhalb der Komponente auslösen)

//bad
Vue.component('TodoList', {})
Vue.component('TodoItem', {})
//good
components/
|- TodoList.vue
|- TodoItem.vue

2. Globales Bewusstsein (erfordert Wissen außerhalb der Komponente)

el

3. Komponententyp (Ändern des Komponententyps)

name
parent

4 . Vorlagenmodifikator (Ändern der Kompilierungsmethode der Vorlage)

functional

5. Vorlagenabhängigkeiten (in der Vorlage verwendete Ressourcen)

delimiters
comments

6. Kombination (Attribute in Optionen zusammenführen)

components
directives
filters

7. Schnittstelle (Schnittstelle der Komponente)

extends
mixins

8. Lokaler Zustand (lokales Reaktionsattribut)

inheritAttrs
model
props/propsData

Ereignis (Rückruf ausgelöst durch reaktionsfähiges Ereignis)

data
computed

10. Nicht reagierende Attribute (Instanzattribute, die nicht auf das reagierende System angewiesen sind)

watch
生命周期钩子 (按照它们被调用的顺序)

11. Rendering (deklarative Beschreibung der Komponentenausgabe)

methods

prop

[Requisitendefinitionen sollten so detailliert wie möglich sein] (notwendig)

Detaillierte Requisitendefinitionen haben zwei Vorteile: 1. Sie geben die API der Komponente an, sodass die Verwendung der Komponente leicht zu verstehen ist; Wenn Sie in der Entwicklungsumgebung unten eine fehlerhafte Requisite für eine Komponente bereitstellen, werden Sie von Vue benachrichtigt, um potenzielle Fehlerquellen zu erkennen und JSX-Kebab-Koffer sollten immer verwendet werden] (dringend empfohlen)

template/render
renderError

Befehle und Funktionen

[Taste immer mit v-for verwenden] (erforderlich)

//bad
props: ['status']
//good
props: {
 status: String
}
//better
props: {
 status: {
  type: String,
  required: true
 }
}

[ Verwenden Sie v-if und v-for nicht gleichzeitig für dasselbe Element] (erforderlich)

//bad
props: {'greeting-text': String}
<WelcomeMessage greetingText="hi"/>
//good
props: {greetingText: String}
<WelcomeMessage greeting-text="hi"/>

[Elemente mit mehreren Attributen sollten in mehreren Zeilen geschrieben werden, eine Zeile für jedes Attribut] (dringend empfohlen)

//bad
 <li v-for="todo in todos">
//good
 <li v-for="todo in todos":key="todo.id">

[Standardreihenfolge der Elementeigenschaften] (empfohlen)

1. Definition (Bereitstellung von Optionen für Komponenten)

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

2. Listenrendering (erstellen Sie mehrere Variationen von das gleiche Element)

//bad
<img src="https://vuejs.org/images/logo.png">
//good
<img
 src="https://vuejs.org/images/logo.png"
 
>

3. Bedingtes Rendering (ob das Element gerendert/angezeigt wird)

is

4. Rendering-Methode (Ändern der Rendering-Methode von Elementen)

v-for

5. Globale Wahrnehmung (muss über Komponentenwissen hinausgehen)

v-if
v-else-if
v-else
v-show
v-cloak

6. Einzigartige Merkmale (Merkmale, die eindeutige Werte erfordern)

v-pre
v-once

Zwei-Wege-Bindung (Kombination von Bindungen und Ereignissen)

id

8 , andere Features (alle gewöhnlichen gebundenen oder ungebundenen Features)

9. Ereignisse (Komponenten-Ereignis-Listener)

ref
key
slot

10. Inhalt (den Inhalt des Elements kopieren)

v-model

Attribut

[Name des privaten Attributs] (erforderlich)

Verwenden Sie immer das Präfix $_ für benutzerdefinierte private Attribute in Plug-Ins, Mixins und anderen Erweiterungen und fügen Sie einen Namespace hinzu um Konflikte mit anderen Autoren (z. B. $_yourPluginName_) zu vermeiden

v-on

[Die Daten der Komponente müssen eine Funktion sein] (erforderlich)

当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数

//bad
Vue.component('some-comp', {
 data: {
  foo: 'bar'
 }
})
//good
Vue.component('some-comp', {
 data: function () {
  return {
   foo: 'bar'
  }
 }
})

【组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法】（强烈推荐）

//bad
{{
 fullName.split(' ').map(function (word) {
  return word[0].toUpperCase() + word.slice(1)
 }).join(' ')
}}
//good
computed: {
 normalizedFullName: function () {
  return this.fullName.split(' ').map(function (word) {
   return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
 }
}

【应该把复杂计算属性分割为尽可能多的更简单的属性】（强烈推荐）

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

【当组件开始觉得密集或难以阅读时，在多个属性之间添加空行可以让其变得容易】（推荐）

//good
props: {
 value: {
  type: String,
  required: true
 },

 focused: {
  type: Boolean,
  default: false
 }
}

谨慎使用

1、元素选择器应该避免在 scoped 中出现

在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的

//bad
<style scoped>
button {
 background-color: red;
}
</style>
//good
<style scoped>
.btn-close {
 background-color: red;
}
</style>

2、应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop

3、应该优先通过 Vuex 管理全局状态，而不是通过 this.$root 或一个全局事件总线

4、如果一组 v-if + v-else 的元素类型相同，最好使用 key (比如两个 e388a4556c0f65e1904146cc1a846bee 元素)

//bad
<p v-if="error">
 错误：{{ error }}
</p>
<p v-else>
 {{ results }}
</p>
//good
<p
 v-if="error"
 key="search-status"
>
 错误：{{ error }}
</p>
<p 
 v-else 
 key="search-results"
>
 {{ results }}
</p>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JavaScript的6种正则表达式（详细教程）

react webpack打包后的文件（详细教程）

在微信小程序中如何实现圆形进度条

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen optimierten Stil in Vue (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!