Vue优化知识点

Vue优化

1. keep-alive

keep-alive缓存组件/页面

其中提供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属性进行提前过滤

6. 路由懒加载

路由的组件懒加载（按需加载）

const router = new vueRouter({
    routes: [
        {path: '/foo', component: () => import('../Foo.vue')}
    ]
})

7. 函数式组件

无状态的组件（展示性组件）标记为函数式组件

在template标签中标记functional，告知转换成函数式组件，而非正常组件

函数式组件：

• 没有状态，即没有响应式数据
• 无实例，没有this上下文
• 没有声明周期方法
• 它只接收一些props传递过来的值

8. 长列表性能

如果列表是纯粹的数据展示，不会有任何变化，那么这个长列表就不需要做响应化

export default {
    data: ()=>({
        users: []
    }),
    async created(){
        const users = await axios.get('/api/users');
        // 将this.users进行冻结，冻结对象无法修改
        this.users = Object.freeze(users);
    }
}

如果是大数据长列表，可以采用虚拟滚动，动态渲染可见部分的内容

vue-virtual-scroller