在v-if/v-if-else/v-else 中使用key
如果一组v-if+v-else的元素类型相同,最好使用属性key(比如两个元素) 如果添加了属性key,那么在对比虚拟DOM时,则会认为它们是两个同的节点,于是会将旧元素移除并在相同的位置添加一个新元素,从而避免意料之外的副作用.
<code> /<code>
路由切换组件不变
在使用vue 开发中,最常碰到的一个问题就是,当页面切换到同一个路由但是不同参数的地址时,组件的生命钩子不会触发
因为vue-router 会识别两个路由使用的是一个组件从而进行复用,并不会重新创建组件,因此组件的生命周期钩子也不会触发.
方案一 :路由导航守卫
可以使用路由提供的beforeRouteUpdate守卫触发,只需要将需要执行的逻辑放到守卫中即可. 如在守卫中发送请求,更新状态并重新渲染页面.
方案二 : 观察$route对象的变化
通过watch 可以监听到路由对象的变化,从而对路由变化做出响应
<code>const User = {
template:'...',
watch:{
$router(to,form){
//做出的反应
}
}
}/<code>方案三 : 为router-view 组件添加属性key
通过给router-view组件设置key,可以使每次切换路由时key都不一样,让虚拟DOM认为router-view组件是一个新节点,从而销毁组件创建新组件 缺点是浪费性能
<code> /<code>
避免v-if 和v-for 一起使用
当处理指令时,v-for比v-if具有更高的优先级,所以即使我们只渲染出列表中的一小部分,也得在每次重渲染的时候遍历整个列表;
方案一: 使用计算属性过滤
<code>
computed:{
activeUser:function(){
return this.users.filter(user=>{
return user.isActive
})
}
}computed:{ activeUser:function(){ return this.users.filter(user=>{ return user.isActive }) } }
方案二: 循环外层使用 v-if
<code>
/<code>
为组件样式设置作用域
通过scoped 特性来设置组件样式作用域
<code>
/<code>
避免在scoped中使用 元素选择器
大量的元素选择器比如(button[data-v-fsdfae4]) 会比类和特性组合的选择器慢
单文件组如何命名
一个良好的命名规范能够在绝大多数中改善可读性和开发体验
方案一 : 单文件组件的文件的大小写
单文件组建的文件名始终是首字母大写(PascalCase),或始终是横线链接(kebab-case)
<code> components
=> my-components.vue
=> MyComponents.vue/<code>方案二 : 基础组件名
应用特定样式和约定的组件(展示类,无逻辑无状态的组件)应该全部以一个特定的前缀开头,比附Base,App或V 优点如下
- 当以私募顺序排列时,应用的基础组件会全部列在一起,容易识别
- 因为是多个单词,可以避免包裹简单的组件时随意选择前缀(比如Mybutton,VueButton)
<code>components =>BaseButton.vue =>BaseIcon.vue =>BaseSearch.vue/<code>
方案三: 单例组件名
只拥有单个活跃实例的组件以The前缀命名,以示其唯一性,但这并以为这组件只可只用于一个单页面,而是每个页面只用一次,这些组件永远不接受任何prop,因为他们是为你的应用定制的,而不是应用的上下文,
<code>components =>TheHeading.vue =>TheSidebar.vue/<code>
方案四: 紧密耦合的组件名
以父组件紧密耦合的子组件应该以父组件作为前缀命名
<code>components =>TodoList.vue =>TodoListItem.vue =>TodoLiisItemButton/<code>
方案五: 组件名中的单词顺序
组件名应该以更高级别的(通常是一般化的描述) 单词开头,以描述新的修饰符结尾
<code>compenents =>SearchButtonClear.vue =>SearchButtonRun.vue =>SearchInputQuery.vue/<code>
方案六 : 完整单词的组件名
组件名应该倾向于完整单词而不是缩写.
<code>components =>UserProfileOptions.vue/<code>
方案七 : 组件为多个单词
组件名应该始终有多个单词组成,根组件App除外.这样做可以避免与现有的以及未来的HTML 冲突.
<code> Vue.component('todo-item',{
})/<code>方案八: 模板中的组件名大小写
单文件组件和字符串模板的组件名应该总是单词首字母大写 但是在DOM模板中总是横线连接的
<code> /<code>
方案九: 自闭合组件
在单文件组件,字符串模板和JSX中没有内容的组件应该是自闭合的,但是在DOM模板中永远不要这样做
<code> /<code>
prop名的大小写
在声明prop的时候,其命名应该始终使用驼峰式命名规则,而在JSX中应该使用使用横线连接的方式
<code> props:{
gettingText:String
}
< MyComponent getting-text="haha"> /<code>多个特性元素
多个特性元素应该分多行撰写,每个特性一行. 方便易读
<code> < MyComponent
foo="1"
bar="2"
seo="3">
/<code>模板中的地简单表达式
模板中应该只包含简单的表达式,复杂的表达式应该重构为计算属性或方法
<code>{{normaliFullName}}
computed:{
normaliFullName:function(){
return this.fullName.map(name=>{
return name[0].toUpperCase() + name.slice(1)
}).join(' ')
}
}/<code>简单的计算属性
应该把复杂的计算属性分割为尽可能更多跟简单的属性.
<code>computed:{
basePrice:function(){
return this.manufacureCost / ( 1- this.profitMargin)
},
discount:function(){
return this.manufacureCost * ( this.discountPercent || 0)
}
}/<code>指令缩写
指令缩写(用:表示v-bind: , @表示v-on: )保持统一
<code> /<code>
收藏
举报
灵魂诗人猪猪侠丶/<code>
