乐趣区

Vue最佳实践

jiezi

Vue 最佳实践

Vue 最佳实践，是参考 Vue 官方风格指南并根据过去 Vue 实际项目开发中的经验总结的一套规范建议。本项目的目的是希望每个 Vue 开发者都能尽快熟悉并上手项目代码，志在帮助 Vue 新手开发者及时避免一些不规范的设计和由此而引发的问题。本建议如有不妥之处，敬请指正！非常欢迎有志同道合的开发者贡献更多、更好的建议。

项目地址：Vue 最佳实践

组件目录内始终使用文件夹管理组件

在 components 目录下的通用组件始终使用文件夹管理组件，并通过 index.js 暴露组件，建议使用以下文件结构：

├── components
│   ├── componentA
│   │   ├── componentA.vue
│   │   └── index.js
│   ├── componentB
│   │   ├── componentA.vue
│   │   └── index.js
│   ├── index.js

开启路由懒加载

vue 路由懒加载其实依赖于 webpack 的 code-spliting 以及 vue 的异步组件，关于 vue 的异步组件可以看动态组件 & 异步组件，而异步组依赖动态 import。

模块化路由配置

在中大型项目中，会有很多的页面或模块，常出现路由嵌套的情况。此时，建议以路由层级进行模块拆分。文件结构如下：

├── router
│   ├── index.js
│   ├── home.js
│   ├── login.js

将一级路由配置在入口文件 index.js 中，将一级路由下的二级路由拆分为独立的模块：

import homeRoutes from './home'
import loginRoutes from './login'

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  { 
    name: 'Home'
    path: '/home'
    component: Home,
    children: [...homeRoutes]
  },
  {
    name: 'Login',
    path: 'login',
    component: Login,
    children: [...loginRoutes]
  }
]

export default new VueRouter({routes})

模块化组织 Vuex 状态

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，建议使用模块化组织 Vuex，将 store 分割成模块。

规范组件选项的顺序

以下是个人推荐的组件选项默认顺序：

export default {
  name: '',
  parent: null,
  extends: null,
  minxins: [],
  components: {},
  inheritAttrs: false,
  model: {},
  props: {},
  data () {return {}
  },
  computed: {},
  watch: {},
  // 生命周期钩子，按调用顺序编写
  beforeCreate () {},
  ...,
  destroyed () {},
  methods: {},
  directives: {},
  filters: {},
  // 使用 render 函数时，置于末尾
  render () {}
}

按以上的顺序，组件没使用到的选项直接缺省即可。

始终为组件样式设置作用域

全局样式容易污染其他组件样式。在 vue 组件中一旦使用了全局的 style，那么你必将陷入无限的梦魇，因为你根本不知道什么时候组件的样式就被全局样式污染了。因此，建议始终为组件样式设置作用域。

可配置的 watch 侦听器

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。vue 侦听器 watch 监听属性时可以使用函数或一个包含 handler 处理函数的配置对象。

化繁为简的计算属性

将复杂计算属性分割为尽可能多的更简单的属性。简单、专注的计算属性减少了信息使用时的假设性限制，所以需求变更时也用不着那么多重构了。如：

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}
}

始终为列表渲染提供唯一的 key 值

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复 / 再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

v-for 可以使用索引 index 设置 key 值。在发生 DOM 插入和删除的列表中请始终提供唯一的 key 值。

欢迎有兴趣的你加入本项目：Vue 最佳实践

退出移动版