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 最佳实践