VUEのこれらの符号化規範をマスターして、あなたのコードの品質を1つの等級に昇格させます

41265 ワード

符号化仕様は、プロジェクト機能の実現とあまり関連していないように見えますが、なぜ重要なのでしょうか.主に3つの要素があります.可読性、メンテナンス性、変更性です.
1つのチームは符号化規範を統一し、開発効率とインタラクティブ効率を大幅に向上させ、他人が書いたコードを簡単に理解し、後期のメンテナンスをより簡単にすることができる.今日はVUEのみの符号化仕様についてお話しします.3つの等級に分けられます:必要、強く推薦して、慎重に使用します
一、必要
1.コンポーネント名は1つの単語ではなく複数の単語です.
反例


Vue.component('todo', {
  // ...
})
export default {
  name: 'Todo',
  // ...
}

正例

Vue.component('todo-item', {
  // ...
})
export default {
  name: 'TodoItem',
  // ...
}

2.コンポーネントのdataは関数である必要があります
反例

export default {
  data: {
    name: 'dzy'
  }
}

正例

export default {
  data() {
    return {
      name: 'dzy'    
    }
  }
}

3.propの定義はできるだけ詳しく、少なくともタイプを指定する必要があります.
反例

props: ['status']

正例

props：{
  name: {
    type: String,
    default: 'dzy',
    required: true    
  }
}

4.v-forにキー値を設定し、常にkeyでv-forを合わせる
反例

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

正例

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

5.v-ifとv-forを同じ要素に使用しないでください.
反例

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

正例

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

6.コンポーネントスタイルの役割ドメインの設定
反例

<style>
.btn-close {
  background-color: red;
}
</style>
  

<style scoped>
.button {
  border: none;
  border-radius: 2px;
} 
</style>

7.プライベート属性名
Vue使用_接頭辞は独自のプライベート属性を定義するため、同じ接頭辞(例えば_update)を使用するとインスタンス属性が上書きされるリスクがあります.Vueの現在のバージョンでこの属性名が使用されていないことを確認しても、将来のバージョンと競合しないことは保証されません.
$接頭辞の場合、Vueエコシステムでの目的は、ユーザの特殊なインスタンス属性に暴露することであるため、プライベート属性に使用するのは適切ではない.
ただし、この2つの接頭辞を$に結合することをお勧めします.ユーザー定義のプライベート属性の約束として、Vue自身と競合しないことを確認します.
正例

var myGreatMixin = {
  // ...
  methods: {
    update: function () {
      // ...
    }
  }
}
var myGreatMixin = {
  // ...
  methods: {
    _update: function () {
      // ...
    }
  }
}
var myGreatMixin = {
  // ...
  methods: {
    $update: function () {
      // ...
    }
  }
}

正例

var myGreatMixin = {
  // ...
  methods: {
    $_myGreatMixin_update: function () {
      // ...
    }
  }
}
//     ！
var myGreatMixin = {
  // ...
  methods: {
    publicMethod() {
      // ...
      myPrivateFunction()
    }
  }
}

function myPrivateFunction() {
  // ...
}

export default myGreatMixin




##  、    

**1.             **

  
```javascript
Vue.component('TodoList', {
  // ...
})

Vue.component('TodoItem', {
  // ...
})

正例

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

2.単一ファイルのコンポーネント名は必ず大文字で始まるか、「-」で接続する
反例

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

正例

components/
|- MyComponent.vue
components/
|- my-component.vue

3.同じ共通接頭辞で始まる特定のスタイルまたはベースコンポーネント
反例

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

正例

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue

4.コンポーネントがカスタムコンポーネントである場合、すなわち共通コンポーネントではない場合、このコンポーネント名はTheで始まるべきであり、一意性を表すべきであり、propを受信すべきではない.propを受信する場合、それは共通コンポーネントであることを示す.
反例

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

正例

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

5.親コンポーネントと子コンポーネントを緊密に結合し、親コンポーネント名を接頭辞名とする
反例

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

正例

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

6.コンポーネント名は高レベルの単語で始まり、記述的な修飾語で終わる.
反例

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

正例

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

7.単一ファイルコンポーネント、文字テンプレート、JSXにコンテンツがないコンポーネントは自閉和しているはずですが、DOMテンプレートでは決してそうしないでください.
反例

<!--       、       JSX   -->
<MyComponent></MyComponent>
<!--   DOM     -->
<my-component/>

正例

<!--       、       JSX   -->
<MyComponent/>
<!--   DOM     -->
<my-component></my-component>

8.JS/JSXのコンポーネント名は、アルパカの名前を付けてください
反例

Vue.component('myComponent', {
  // ...
})
import myComponent from './MyComponent.vue'
export default {
  name: 'myComponent',
  // ...
}
export default {
  name: 'my-component',
  // ...
}

正例

Vue.component('MyComponent', {
  // ...
})
Vue.component('my-component', {
  // ...
})
import MyComponent from './MyComponent.vue'
export default {
  name: 'MyComponent',
  // ...
}

9.コンポーネント名は略語ではなく完全な英語単語であること
反例

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

正例

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


**v10.    prop   ，        ，     JSX      kebab-case**

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

正例

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

11.複数のattributeの要素は複数行に分けて書くべきで、各attributeは1行
反例

<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"
/>

12.コンポーネントテンプレートには単純な式のみが含まれ、複雑な式は計算属性またはメソッドとして再構築される必要があります.
反例

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

正例

<!--      -->
{{ normalizedFullName }}
//                
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}
```

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

正例

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

14.空でないattitude値には常に引用符を付ける必要があります.
反例

<input type=text>
<AppSidebar :style={width:sidebarWidth+'px'}>
  

<input type="text">
<AppSidebar :style="{ width: sidebarWidth + 'px' }">

15.命令の省略可能な推奨略語

<input
  v-bind:value="newTodoText"
  :placeholder="newTodoInstructions"
>
<input
  v-on:input="onInput"
  @focus="onFocus"
>
<template v-slot:header>
  <h1>Here might be a page title</h1>
</template>

<template #footer>
  <p>Here's some contact info</p>
</template>

私のウェブサイトへようこそ:www.dzyong.トップ、私の公衆番号【前端篠園】に注目して、私のすべてのプッシュを見逃さないでください
三、慎重に使用する
1.同じグループのv-ifとv-elseはkey標識を使用することが望ましい
どういう意味ですか.私たちがどのようにv-ifとv-elseを使うかは、グループ化されています.私たちが1つのコンテキストの中で、v-ifとv-elseに何度も使用すると、混乱を引き起こしやすく、そのv-elseがそのv-elseに属していることがわかりにくいです.キーIDを追加することでDOMの更新効率も向上

<div
  v-if="error"
  key="search-status"
>
    ：{{ error }}
</div>
<div
  v-else
  key="search-results"
>
  {{ results }}
</div>

2.エレメントセレクタはscopedに現れないようにする
scopedスタイルでは、クラスセレクタは要素セレクタよりもよく、要素セレクタを大量に使用するのは遅いです.
これは、VUEがスタイルに役割ドメインを設定するために、vueが下の図に示すように要素に一意のattributeを追加するためです.次に、エレメントセレクタを変更して、エレメントセレクタのエレメントのうち、このattributeを持つエレメントのみが有効になるようにします.したがって、エレメント+attributeの組合せを多く使用するセレクタは、クラス+attributeの組合せのセレクタよりも多く、より遅くなります.
3.this$parentを使用したりpropを変更したりするのではなく、propを優先的に使用して親子コンポーネント間の通信を行う必要があります.
4.this.$ではなく、VUEXを使用してグローバル・ステータスを管理する必要があります.rootまたはグローバルイベントバス

spring security2.0塩値暗号化方法

vue 2について0プロジェクトリリースのオンライン操作手順