Vue 学习心得

最后更新：
阅读次数： 次
许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

好巧，刚刚发现 Vue 官方也出了自己的风格指南。传送门：Vue 风格指南

本文我将结合自己的心得和 Vue 官方给出的风格指南进行汇总。

组件命名相关

  • 组件名应该始终是多个单词的，根组件 App 除外

这样做可以避免跟现有的以及未来新出现的 HTML 元素相冲突，因为目前所有的 HTML 元素名称都是单个单词的。

  • 单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)
// bad
mytable.vue;
myTable.vue;

// good
MyTable.vue;
my - table.vue;
  • 统一为基础组件的文件名以一个特定的前缀开头，比如：Base、App、V
// bad
MyButton.vue;
VueTable.vue;
Icon.vue;

// good
BaseButton.vue;
BaseTable.vue;
BaseIcon.vue;

// good
AppButton.vue;
AppTable.vue;
AppIcon.vue;
  • 和父组件紧密耦合的子组件应该以父组件名作为前缀命名
// bad
TodoList.vue;
TodoItem.vue;
TodoButton.vue;

// good
TodoList.vue;
TodoListItem.vue;
TodoListItemButton.vue;
  • 在模板中组件元素始终以 kebab-case 方式命名
// bad
<Faces></Faces>
<mytable></mytable>

// good
<faces></faces>
<my-table></my-table>
  • 为组件名使用完整单词命名而不是缩写单词
// bad
SdSettings.vue;
UProfOpts.vue;

// good
StudentDashboardSettings.vue;
UserProfileOptions.vue;
  • 当 props 或 compoents 中使用 camelCase (驼峰式命名) 时，请在对应的 HTML 模板中使用相应的 kebab-case (短横线分隔式命名)
// 在 JavaScript 中使用 camelCase
let myComponent = {
  props: ["myMessage"],
  template: "<span>{{ myMessage }}</span>"
};

new Vue({
  el: "#app",
  components: {
    myComponent
  }
});
<!-- 在 HTML 中使用 kebab-case -->
<div id="app"><my-component :my-message="message"></my-component></div>

代码格式

  • 多个特性的元素应该分多行撰写，每个特性一行
<!-- bad -->
<msg class="my-message" :message="message" @click.native="showMessage"></msg>

<!-- good -->
<msg class="my-message" :message="message" @click.native="showMessage"></msg>

编码规范

  • 组件的 data 选项必须是一个返回对象的函数

由于对象的引用问题，直接给 data 赋值为一个对象后，会使得该组件的所有实例共享（共同引用）一个数据对象，从而增加了实例间数据的耦合度，不利于组件实例的独立性。

  • 组件的 props 选项应该尽量描述详细，至少标明属性类型

这样做可以使组件的 props 选项更加语义化，减少父子组件间通信出错的概率！

// bad
props: ['message']

// good
props: {
    message: String
}

// better
props: {
    message: {
        type: String,
        required: true,
        validator(value) {
            return value.length < 10;
        }
    }
},
  • 组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法
// bad
<div id="my-name">{{ firstName + ' ' + lastName }}</div>

// good
computed:{
    fullName(){
        return this.firstName + ' ' + this.lastName;
    }
}

<div id="my-name">{{ fullName }}</div>
  • 把复杂的计算属性尽可能多地分割为更简单的计算属性

这样做便于阅读，并且有利于后期维护。

  • 始终为非空 HTML 特性值加上双引号
// bad
<input type=text />

// good
<input type="text" />
  • 始终使用指令缩写
// bad
<input v-on:focus="inputFocus" />
<input v-bind:value="message" />

// good
<input @focus="inputFocus" />
<input :value="message" />
  • 为 v-for 元素设置唯一 key 值

该做法有利于在元素上维护可预测的行为，比如动画中的对象固化 (object constancy)。

  • 在单文件组件中，最好给每一个组件指定一个唯一的 name 属性，方便路由时在 chrome 扩展工具（Vue） 识别对应的组件

add-name-for-vue-component.png

性能相关

  • 为组件样式设置作用域

追求性能的项目不应该使用 style 的 scoped 特性，因为使用 scoped 特性会产生大量的元素和特性组合的选择器 (比如 button[data-v-f3f3eg9]) ，而这种选择器会比类和特性组合的选择器慢，所以应该尽可能使用基于某种命名方法（比如 BEM）的类选择器。

而对于复杂的大型项目，则可以考虑使用 scoped 特性，并且必须保证自己的样式能应用到指定元素。

  • 为低开销的静态组件使用 v-once，防止不必要的重新渲染
let bigComponent = {
    template: `<div v-once>
        ...很多静态内容...
      </div>`
}

<big-component v-once></big-component>
  • 所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注业务逻辑

为 DOM 元素标记 ref 特性，然后使用 this.$refs.xxx 访问 DOM 元素。

待定