Vue优化
1. keep-alive
keep-alive缓存组件/页面
<template>
<div>
<keep-alive>
<router-view />
</keep-alive>
</div>
</template>
其中提供include和exclude属性,两者都支持字符串后正则表达式,include表示只有名称匹配的组件会被缓存,exclude表示任何名称匹配的组件都不会被缓存(exclude优先级高于include)
对应的两个钩子函数:activated和deactivated,当组件被激活触发activated,当组件被移入缓存触发deactivated钩子函数
2. SSR
服务端渲染
- SEO
- 首屏加载速度
- 任重道远:服务端的负载问题
3. 合理拆分组件
拆分组件,将原始大的根组件,拆分成一些子组件,自己管自己的渲染(vue2.0中变化侦测只通知到组件,组件内部进行虚拟DOM操作)
如果只有一个根组件,那么就只有一个watcher,拆分组件可以产生多个watcher来进行监听和渲染
4. v-show
v-show复用DOM,v-show控制元素display属性,适合频繁显示隐藏的节点
v-if是卸载和创建挂载,如果频繁创建和卸载会带来性能开销(操作DOM)
5. v-for和v-if
v-for的优先级比v-if的优先级高
如果一个节点中同时出现v-if和v-for,那么编译函数中的for循环中每次都会进行if的判断
可以使用computed属性进行提前过滤
<template>
<ul>
<li v-for="user in users" :key="{{user.name}}"></li>
</ul>
</template>
<script>
export default {
data(){
return{
users: {/*...*/}
}
},
computed: {
activeUser: function() {
/*...*/
}
}
}
</script>
6. 路由懒加载
路由的组件懒加载(按需加载)
const router = new vueRouter({
routes: [
{path: '/foo', component: () => import('../Foo.vue')}
]
})
7. 函数式组件
无状态的组件(展示性组件)标记为函数式组件
在template标签中标记functional,告知转换成函数式组件,而非正常组件
函数式组件:
- 没有状态,即没有响应式数据
- 无实例,没有this上下文
- 没有声明周期方法
- 它只接收一些props传递过来的值
<template functional>
</template>
8. 长列表性能
如果列表是纯粹的数据展示,不会有任何变化,那么这个长列表就不需要做响应化
export default {
data: ()=>({
users: []
}),
async created(){
const users = await axios.get('/api/users');
// 将this.users进行冻结,冻结对象无法修改
this.users = Object.freeze(users);
}
}
如果是大数据长列表,可以采用虚拟滚动,动态渲染可见部分的内容
vue-virtual-scroller