vue style Guide

纪录一下自己学习的历程 有理解错误的欢迎提出指教

必要的

组件名称最好为多个单词，可以避免跟未来的 HTML tag 冲突。
例如 todo 改成 todo-item。

data 必要是一个 callback 函数，因为必须创造一个独立数据。
new Vue 直接使用 data 就好，因为只存在一个实例。

props 内容要尽量详尽，也更能看懂组件的使用方法，最少要指定型别，这样再传入错误型别时，能更容易找到错 误。

使用 v-for 时尽量搭配 :key 使用，key 要是唯一值，可以让程式码更容易预测。

不要在一个 tag 上同时使用 v-for, v-if 因为 v-for 的优先级比 v-if 高， 所以会造成只渲染一部分就要重 新渲染整个列表。
比较好办法是 v-if 要计算的放在 computed 再把计算结果放到 v-for 里面，或是在容器元素中放 v-if 先计算 为 false 的就不会再渲染。

为单元件组件样式加上作用域。
scoped 或是 css Modules 或是 BEM 策略。

自定义的私有属性使用 $_ 前缀，并附带一个命名空间。
範例 $_ 自己命名 - 作用名。

强烈推荐

只要有能够拼接文件的系统，多使用单独的文件，会方便管理。

单文件组件的命名最好以单词都为开头命名，範例 TheTooltip 或是以 - 连接，範例 the-tooltip。
不要混用命名方法。

最简单可多次使用的基础组件命名方法最好在前缀加上。
Base, App, V 这三种。

只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。

只在父组件下有意义的组件，应该要用父组件名当命名，这样才会把相关档案排在一起。

以一般化的单词开头，描述性的单词结尾，为组件命名。

HTML 不接受自闭合的自订议元素，错误示範 。
但在单文件组件字符串模板和 JSX 中可以这样做让你的代码更简洁。

单文件组件和字符串模板中组件名应该总是 PascalCase，範例 MyComponent。
但是在 DOM 模板中总是 kebab-case 範例 my-component。

在 js 的档案组件命名也是 PascalCase。

组件命名要使用完整单词不要使用缩写。

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case
範例

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

多个特性的 tag 每个特性占一行。

组件模板应该只包含简单的表达式，複杂的表达式则应该重构为 computed 或 methods。

要把複杂的 computed 分成多个简单的 computed 这样方便测试、阅读、改变。

HTML 特性值应该始终带 "" (单引号或双引号，选你 JS 里不用的那个)。

指令缩写不要混用，要全部缩写或全部不缩写。