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 粒度