为列表渲染设置属性key
切忌使用下标作为key,会失去虚拟Dom对比的优化
// v-for:key
// bad
<div v-for = '(item,i) in items' :key = 'i'>
<!--内容-->
</div>
// good
<div v-for = '(item,i) in items' :key = 'item.id'>
<!--内容-->
</div>
在v-if/v-if-else/v-else 中使用key
添加key,对比虚拟Dom时会认为是不同的节点,将旧元素直接移除并在相同位置添加新元素
// bad
<div v-if = 'error'>
{{error}}
</div>
<div v-else>
{{results}}
</div>
// good
<div v-if = 'error' key = 'search-status'>
{{error}}
</div>
<div v-else key = 'search-results'>
{{results}}
</div>
路由切换组件不变
路由的params参数改变不会重新触发组件的生命周期
解决方法
路由导航守卫 beforeRouteUpdate 拉取数据重新渲染视图，vue-router2.2+ 支持，推荐使用，观察 $route对象的变化，添加 watch,增加依赖追踪的内存开销
// bad
const user = {
template:' ',
watch:{
'$route'(to,from){
//...
}
}
}
// good
const user = {
template:' ',
watch: {
'$route.query.id'(to,from){
//...
},
'$route.query.page'(to,from){
//...
}
}
}
为router-view组件添加属性key,利用虚拟dom渲染通过key对比节点的原理,不足之处在于切换路由组件会被销毁并重新创建
<router-view :key = '$route.fullPath'></router-view>
为所有路由统一添加 query
上级路由携带的
query参数，需要在所有路由中携带，且不影响切换
解决方案
- 使用全局守卫
beforeEach
// 缺点 全局守卫 beforeEach 会执行两次，且每次切换路由都会切换两次
const query = {refer: 'test'}
router.beforeEach((to,from,next)=>{
to.query.referer ? next() : next({...to,query,...query})
})
- 使用函数劫持（推荐使用）
const query = {refer: 'test'};
const transitionTo = router.history.transitionTo
router.history.transitionTo = function(location,onComplete,onAbout){
location = typeof location === 'object' ? {...location,query:{...location.query,...query}} : {path:location,query}
transitionTo.call(router.history,location,onComplete,onAbout)
}
区分 vuex 和 props 的使用边界
业务组件使用
vuex维护状态，方便组件之间通信
通用组件使用
props以及事件 进行父子组件通信，与业务解耦，在通用组件中定义props尽可能详细，指定类型
避免 v-if 和 v-for 一起使用
推荐的做法
为过滤列表中的项目,可将循环列表替换为一个计算属性,返回过滤后的列表
为避免渲染本该隐藏的列表,可将v-if放到容器组件上
为组件样式设置作用域
通过scoped特性或者css Modules设置样式作用域,组件库使用class策略,使用容易理解的class名称且没有太高的选择器优先级,不容易导致冲突
// good
<style scoped>
.button{
border:none
}
</style>
// good
<style module>
.button{
border:none
}
</style>
避免在scoped中使用元素选择器
在scpoed样式中,类选择器优于元素选择器,大量使用元素选择器很慢
// bad
<style scoped>
button{
border:none;
}
</style>
//good
<style scoped>
.btn{
border:none;
}
</style>
避免隐性的父子组件通信
通过props和事件进行父子组件之间通信,不可使用this.$parent或改变prop
单文件组件命名
单文件组件名,单词首字母大写,或者始终是横线连接
// bad
components
|-mycomponent.vue
components
|-myComponent.vue
//good
components
|-MyComponent.vue
components
|-my-component.vue
基础组件名,以特定的前缀开头,组件不含Vuex store的全局状态
// bad
components
|-MyButton.vue
|-VueTable.vue
|-Icon.vue
//good
components
|-BaseButton.vue
|-BaseTable.vue
|-BaseIcon.vue
单例组件名,以The前缀命名,表示唯一性,该组件不接受任何prop,非复用组件
// bad
components
|-Heading.vue
|-MySiderbar.vue
//good
components
|-TheHeading.vue
|-TheSidebar.vue
精密耦合的组件名,与父组件紧密耦合的组件应该以父组件为前缀命名
// bad
components
|-TodoList.vue
|-TodoItem.vue
|-TodoButton.vue
components
|-SearchSidebar.vue
|-NavigationForSearchSideBar.vue
//good
components
|-TodoList/
|-Item/
|-index.vue
|-Button.vue
|-index.vue
//better
components
|-TodoList.vue
|-TodoListItem.vue
|-TodoListItemButton.vue
components
|-SearchSidebar.vue
|-SearchSideBarNavigation.vue
组件名中的单词顺序 高级别单词开头+描述性修饰词结尾
//bad
components
|-ClearSearchButton.vue
|-RunSearchButton.vue
|-SearchInput.vue
|-TermsCheckbox.vue
// good
components
|-SearchButtonClear.vue
|-SearchButtonRun.vue
|-SearchInputQuery.vue
|-SettingsCheckboxTerms.vue
完整单词的组件名
//bad
components
|-SdSettings.vue
|-UProfOpts.vue
// good
components
|-StudentDashboardSettings.vue
|-UserProfileOptions.vue
模板中的组件名大小写 组件名除根组件App外应始终由多个单词组成
//bad
vue.component('todo',{
// ...
})
export default{
name:'Todo',
// ...
}
// good
vue.component('todo-item',{
// ...
})
export default{
name:'TodoItem',
// ...
}
模板中的组件名大小写 本身html对大小写不敏感,尽量使用横线连接
// bad
<!-- 在单文件组件和字符串模板中 -->
<mycomponent />
<!-- 在单文件组件和字符串模板中 -->
<myComponent />
<!-- 在DOM 模板中-->
<MyComponent></MyComponent>
// good
<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>
<!-- 在DOM 模板中 -->
<my-component></my-component>
JS/JSX中的组件名大小写
// bad
Vue.component('myComponent',{
//...
})
import myComponent from './MyComponent.vue'
export default {
name: 'myComponent',
// ...
}
export default {
name: 'my-component',
// ...
}
// good
Vue.component('MyComponent',{
//...
})
Vue.component('my-component',{
//...
})
import myComponent from './MyComponent.vue'
export default {
name: 'MyComponent',
// ...
}
自闭合组件
// bad
<!-- 在单文件组件和字符串模板和JSX中 -->
<MyComponent></MyComponent>
<!-- 在DOM 模板中 -->
<my-component/>
// good
<!-- 在单文件组件和字符串模板和JSX中 -->
<MyComponent />
<!-- 在DOM 模板中 -->
<my-component></my-component>
prop名的大小写
// bad
props:{
'greeting-text':String
}
<WelcomeMessage greetdingText='hi'/>
//good
props:{
greetingText:String
}
<WelcomeMessage greetding-text='hi'/>
多个特性的元素
多行分隔对象的多个属性
// bad
< img src='https://vuejs.org' alt='vue logo'>
<MycComponent foo='a' bar='b' baz='c' />
//good
<MyComponent
foo="a"
bar="b"
baz="c"
/>
模板中简单的表达式
// bad
{{
fullName.split(' ').map(function(word){
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}}
// good
<!-- 模板中 -->
{{ normalizedFullName}}
computed:{
normalizedFullName:function(){
return this.fullName.split(' ').map(function(word){
return word[0].toUpperCase()+word.slice(1)
}).join(' ')
}
简单的计算属性
复杂的计算属性应尽可能分为更多简单的属性,易于测试,易于阅读,低耦合
// bad
computed:{
price:()=>{
let basePrice = this.manufactureCost / (1 - this.profitMargin)
return (
basePrice -
basePrice * (this.discountPrecent || 0)
)
}
}
// good
computed:{
basePrice:()=>{
return this.manufactureCost / (1 - this.profitMargin)
}
discount:()=>{
return this.basePrice * (this.discountPrecent || 0)
}
finalPrice()=>{
return this.basePrice - this.discount
}
}
指令缩写
指令缩写保持统一，用 :标识 v-bind,@表示 v-on
