There are only two hard things in Computer Science: cache invalidation and naming things.

-- Phil Karlton

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery

-- Mathias Verraes

Official

A https://cn.vuejs.org/v2/style-guide/#Prop-定義-必要

-- wen

A https://cn.vuejs.org/v2/style-guide/#為-v-for-設置鍵值-必要

-- wen

A https://cn.vuejs.org/v2/style-guide/#為組件樣式設置作用域-必要

-- xuan

A https://cn.vuejs.org/v2/style-guide/#私有屬性名-必要

在插件、混入等擴展中始終為自定義的私有屬性使用 $_ 前綴。并附帶一個命名空間以回避和其它作者的沖突 (比如 $yourPluginName)。

-- kang
-- xuan
-- tong

B https://cn.vuejs.org/v2/style-guide/#自閉合組件-強烈推薦

在單文件組件、字符串模板和JSX中沒有內容的組件應該是自閉合的——但在 DOM 模板里永遠不要這樣做。

DOM模板 誤區？
https://vuejsdevelopers.com/2017/09/17/vue-js-avoid-dom-templates/
https://cn.vuejs.org/v2/guide/components.html#DOM-模板解析注意事項

-- wen

B https://cn.vuejs.org/v2/style-guide/#簡單的計算屬性-強烈推薦

-- xuan
-- tong

B https://cn.vuejs.org/v2/style-guide/#模板中簡單的表達式-強烈推薦

-- xuan

B https://cn.vuejs.org/v2/style-guide/#基礎組件名-強烈推薦

-- xuan

B https://cn.vuejs.org/v2/style-guide/#單例組件名-強烈推薦

-- tong

B https://cn.vuejs.org/v2/style-guide/#緊密耦合的組件名-強烈推薦

-- tong

B https://cn.vuejs.org/v2/style-guide/#組件名中的單詞順序-強烈推薦

-- tong

B https://cn.vuejs.org/v2/style-guide/#完整單詞的組件名-強烈推薦

-- tong

B https://cn.vuejs.org/v2/style-guide/#JS-JSX-中的組件名大小寫-強烈推薦

• https://cn.vuejs.org/v2/style-guide/#單文件組件文件的大小寫-強烈推薦
• https://cn.vuejs.org/v2/style-guide/#模板中的組件名大小寫-強烈推薦

JS/JSX 中的組件名應該始終是 PascalCase 的，盡管在較為簡單的應用中只使用 Vue.component 進行全局組件注冊時，可以使用 kebab-case 字符串。

• 組件的name選項的格式統一為kebab-case，而且每個組件必須要有一個name選項 -- kang
• 單詞大寫開頭 -- tong

C https://cn.vuejs.org/v2/style-guide/#組件-實例的選項的順序-推薦

-- kang
-- tong

C https://cn.vuejs.org/v2/style-guide/#元素特性的順序-推薦

-- kang
-- tong

C https://cn.vuejs.org/v2/style-guide/#單文件組件的頂級元素的順序-推薦

.vue單文件中各個模塊的順序是：<template>、<script>、<style>、<custom>（官方）-- kang
-- tong

C https://cn.vuejs.org/v2/style-guide/#組件-實例選項中的空行-推薦

組件/實例選項中國空行（template標簽內支持， script標簽內不支持，我也不知道為什么，視覺習慣吧） -- tong

D https://cn.vuejs.org/v2/style-guide/#scoped-中的元素選擇器-謹慎使用

-- kang
-- tong

image.png

D https://cn.vuejs.org/v2/style-guide/#沒有在-v-if-v-if-else-v-else-中使用-key-謹慎使用

-- wen
不支持？ -- tong

補充

v-once的使用

https://cn.vuejs.org/v2/api/#v-once

多個屬性換行寫

<a a=’1’ 
   b=’2’
   c=’3’></a>

所有雙括號內首尾留空格

 {{ a, b }}

class 疑問

:class=[ ‘a’, { ‘b’: c } ]還是 class=”a” :class=”{ ‘b’: c }”

每一個屬性后面要不要都加空行？

樣式名字要不要出一份常用的樣式名字模板？ 如根元素我喜歡用class=”XXX-container” 后面一個容器用class=”XXX-wrap”

一些統一的方法名字需要統一還是根據功能不同起名字？如對于所有的組件內的click事件，我傾向于@click=”action” 父組件@action=”XXX”

結尾逗號是否要全部統一啟用？

{ a: 123, }

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas
(注意JSON不允許trailing commas)
es8

類選擇器命名規范 -- tong

services 提取url, 展開參數

image.png

Boolean variables, or functions that return a boolean value, should start with “is,” “has” or “should.”

isFish = true  
isCat = false  
hasScales = true 
hasFur = false 
canSwim = true  
wasEgg = true 
eatAble = true

匿名函數與debug

named callback

const funWithName = () => { console.log('I'm happy I have a name.'); }
document.addEventListen('scroll', function onScroll(e) { ... });
function onSuccess() { ... }
doSomeAsyncOp.then(onSuccess)
doSomeAsyncOp.then(function onSuccess() { ... })
// doSomeAsyncOp.then(res => { ... })

// onXXXError
// onXXXSuccess
// onXXXFinish
// beXXXforeSend

arrow-parens "always"

(a) => { ... }

https://eslint.org/docs/rules/arrow-parens

arrow-body-style "always"

https://eslint.org/docs/rules/arrow-body-style

code split 粒度